July 21st, 2020
You can truncate a single line of text with an ellipsis (…) fairly easily with
text-overflow and a few friends. But, as you might expect, that truncation happens at the end of the line of text. What if you want to truncate content in the middle?
Leonardo Faria details good use cases for this, like in an operating system window listing files. The line of text is a file name and a file extension. When that line truncates, it truncates just the name, always leaving the extension at the end. The trick is a flexbox parent so you can use overflow on just the file name part, but have to make sure to reset the
min-width, as the natural value, there is
min-content, which prevents the truncation which is confusing.