Truncate text in input type = file

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;
}

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/

Tags:

Css