title: Smart truncation of filename in CSS
body: <p>I'm trying to make a custom truncation of text that represents a filename that always shows the file extension, but hides part of the name if there's not enough space. For example, the filename is <code>testtesttest.xml</code>. If there's not enough space, I want it to display something like <code>tes...xml</code></p>
  <p>I've been playing with <code>text-overflow: ellipsis</code>, but I didn't get any result. It either truncates the whole line, or doesn't truncate at all.</p>
  <pre class="lang-js prettyprint-override"><code>export default function FilenameTruncate(props) {
      const [name, extension] = props.filename.split('.')
      return (
          &lt;div className=&quot;filename-container&quot;&gt;
              &lt;div className=&quot;filename-text&quot;&gt;
                  &lt;span&gt;{name}&lt;/span&gt;
              &lt;/div&gt;
              &lt;div className=&quot;filename-ext&quot;&gt;
                  &lt;span&gt;.{extension}&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  <pre class="lang-css prettyprint-override"><code>.filename-container {
      display: flex;
      flex-direction: row;
      overflow: hidden;
  }
  
  .filename-text {
      white-space: nowrap;
      text-overflow: ellipsis;
  }
  
  .filename-ext {
      white-space: nowrap;
  }
  
  </code></pre>