Truncate text in input type = file

Question

Is it possible to truncate text in input type="file", I mean, when I select file if filename is too long it should be truncated. I tried to apply text-overflow: ellipsis; but nothing changes.

Answer 1

If you specify a fixed width for the input, most browsers should truncate it themselves. If not, you can still use text-overflow: ellipsis but it won't make any difference until you use it with two additional properties and also with width:

input[type=file] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 150px;
}

Answer 2

Are you trying to actually truncate it, or change the display? You cannot actually set the value, because that is a security risk -- no browser allows that. To change the display of the value, you could do what matewka suggests. For more control over the appearance, you could also hide the input and replace it with a <span> containing the value in question, like this: http://jsfiddle.net/TexasBrawler/jrJm2/2/

Answer 3

How to truncate filename for input type file:

If you have a container around your file input you can set it to display: flex; and it will truncate with ellipsis.

Try messing with the width in the example below and trying removing display: flex; to see the text overflow the container with no truncation.

.file-input-container {
  display: flex;
  width: 160px;
  padding: 10px;
  background-color: #CCC;
}

<div class="file-input-container">
  <input type="file" />
</div>