Uses Limitless package styles (based on Bootstrap)

Actually, there is a file selection point, and everything goes well as long as the file name is not very large:

enter image description here

But when the file name is very long, the elements start floating a little:

enter image description here

Is there any way to replace the displayed in the browser file name, cutting, for example, the middle, so that it looked like on the screenshot below?

enter image description here

    3 answers 3

    Yes, this possibility can be realized. If you specify a fixed width for input , then most browsers should truncate the long name themselves. If you do not specify a fixed width , then you can use text-overflow: ellipsis but it will not make sense until you use it with two additional properties, as well as with width as follows (CSS):

     input[type=file] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 250px; } 
     <p>Для демонстрации выберите файл с длинным именем</p> <input type=file>

    text-overflow determines the parameters of the visibility of the text in the block, if the entire text does not fit in the specified area. There are two options: the text is cropped; the text is cut off and an ellipsis is added to the end of the line. text-overflow works when the value of the overflow property is set to auto , scroll or hidden .

    • clip - the text is cut to the size of the area;
    • ellipsis - the text is cut off and an ellipsis is added to the end of the line.

    Here's an interesting link to learn: Crop a long build ...

    • one
      I'm not sure what is shown in the pictures is input [type = file] - Grundy
    • one
      @Grundy, in the title of the question it is written - Denis Bubnov
    • It is necessary to read not only the title. - Grundy
    • @Grundy, I read both the title and the question itself. In Bootstrap , a long time ago there was a similar problem and was solved as I wrote. About the fact that the pictures are for me, so there is quite an <input type=file> , the styles that have slightly modified it are simply screwed. - Denis Bubnov
    • one
      @DenisBubnov, nothing, if I'm not mistaken, ellipsis and with the span will work for itself - Grundy

    You can still like this:

     $(document).ready(function(){ $(".file").on("change", function(e){ var name = e.target.value.split( '\\' ).pop(); var tmp = ""; if(name.length > 10) { tmp = name.substr(0,5); tmp += "..." + name.substr(name.length-6,name.length); } else { tmp = name; } $('.spn').text(tmp); }) }) 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="file" name="file" id="file" class="file" style="display: none"> <label for="file">Choose </label>&nbsp;<span class="spn"></span> </form>

      Set Limitless Regular Code

       <input type="file" class="file-styled" accept=".jpg, .jpeg, .xls, .xlsx, .pdf, .doc, .docx, .png" name=file[0]/>

      turns in the final form in:

       <div class="uploader"> <input type="file" class="file-styled" accept=".jpg, .jpeg, .xls, .xlsx, .pdf, .doc, .docx, .png" name="file[0]/"> <span class="filename" style="user-select: none;">Файл не выбран</span> <span class="action btn bg-grey-300 legitRipple" style="user-select: none;">Выберите файл</span> </div>

      Actually, you can change the displayed file name using

       $(document).on('change', 'input[type=file]', function(){ var filename = $(this).next('.filename').html(), name = filename.substr(0, filename.lastIndexOf('.')), ext = filename.substr(filename.lastIndexOf('.')); if (name.length > 20){ name = name.substr(0, 10) + '...' + name.substr(name.length - 5) } filename = name + ext; $(this).siblings('.filename').html(filename) });

      An example of what it looks like in the end: enter image description here

      Thanks to @Grundy for help finding a solution and @Denis Bubnov for a good answer