Prevent overflow in input file with long file names

If I do not understand correctly what you want is that the name of the file is shown whole screen without leaving the div. Honestly, I think you can not do it only with CSS, but you'll have to use some "tricks" to do it, and a bit of Javascript. I'm going to do an imitation of the input instead of using the input real.

The first thing we are going to do is create a label that will have the attribute for , whose parameter will be the id of our input type="file" . Once this is done, we will hide the original input. In this way, the attribute for of the label, will call the input to launch the event to load a file, although we will be pressing the label instead of the input.

Finally I will create a span where I will store the text that contains my file. So that it does not protrude from the div and show it to me in several lines I will have to put a fixed width to both the div and the span and use the property word-wrap: break-word; of CSS.

The advantage of using the label instead of the input type="file to launch the event of loading the files is that the first one we can easily give styles and we can stylize it with a button shape, with an input form, etc. .

NOTE: Following your comments, I have edited the answer with some styles in label so that it resembles the original input . I have placed one on top of the other and I have removed the background at div so that you can see the difference. The "input" that is above is the one that I have customized and the one below would be the original.

Your modified example would look like this:

var fichero = document.getElementById("fichero");
var texto = document.getElementById("texto");

fichero.onchange = function () {
    texto.innerHTML = fichero.files[0].name;
};

#fichero{
  display: none;
}
div{
  /*background: #456;*/
  padding: 40px 10px;
  width: 400px;
}

#boton{
  background-color: #e6e6e6;
  padding: 2px 7px;
  font: 400 13.3333px Arial;
  border: 1px solid #999;
}

#texto{
  display: inline-block;
  word-wrap: break-word;
  max-width: 100%;
  font: 400 13.3333px Arial;
}

<div>
  <input id="fichero" name="file4[]" accept=".pdf" type="file">
  <label id="boton" for="fichero">Seleccionar archivo</label>
  <span id="texto">Ningún archivo seleccionado</span>
  <input type="file">  
</div>

To prevent overflow to input add flexible box width, that is, a width: 100% , usually this solves it.

Oh and if you are detecting the styles, what happens is that they do not apply on this label.

input{
  display: inline-block;
  white-space: nowrap;
  width: 100%;
}
div{
  max-width: 250px;
  background: #456;
  padding: 40px 10px;
}

<div>
  <input name="file4[]" accept=".pdf" type="file">
</div>

Add width: 100% to input :

input{
  display: inline-block;
  white-space: nowrap;
  width: 100%;
}