title: Input type file - wrap long file name text
body: <p>Is it possible to wrap the file name text that appears beside the browse button?</p>
  
  <p>I have a simple upload button</p>
  
  <pre><code>&lt;input type="file" /&gt;
  </code></pre>
  
  <p>I'm uploading a file with a very long name, you can see that a horizontal scrollbar has appeared to enable reading the full text:</p>
  
  <p><a href="https://i.stack.imgur.com/dAXi2.png" rel="noreferrer"><img src="https://i.stack.imgur.com/dAXi2.png" alt="enter image description here"></a></p>
  
  <p>I've tried tinkering with the css but it adds an ellipsis and i can't figure out a way to show the full file name without horizontal scrollbars.</p>
  
  <pre><code>input[type="file"] {
      border: 1px solid red;
      white-space: normal;
      word-wrap: break-word;
      width: 200px;
      overflow: auto;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/bfwht.png" rel="noreferrer"><img src="https://i.stack.imgur.com/bfwht.png" alt="enter image description here"></a></p>
  
  <p>thanks</p>