This is a thing I’ve wanted for ages, and it doesn’t make sense why there is no plain CSS solution up to date.
The last time I thought about it (it was today) I came up with that it should be a new value for
text-overflow property, like
text-overflow: scale, alongside with two new properties
max-font-size, both of which would allow us to control things for the most use-cases .
Issues that should be solved:
- Whenever there is a multiline text and only one line overflows, should the font-size of the whole text be scaled, or only the one for the line that overflows? The best would be to have a way to do both, and the easiest would be to scale everything.
- Should only font-size be scaled, or both font-size and line-height? What about font-weight and other possible properties of the font? I’d say that for the start we should be able to allow both line-height scaling and no line-height scaling, possibly by different values?
Most of the use-cases are already solved in JS in a number of ways (for example, https://github.com/rikschennink/fitty), and performance or complexity shouldn’t be valid reasons not to implement it in CSS. That’s a thing that developers need really often and it just should be in CSS, one way or another. Performance shouldn’t be worse than that of the JS tools already provide (and it should be on developers to use it properly), and any complexity issues should be fixed by having compromises that would allow the most use cases to be achievable (and for the more complex ones not to be, at least at first).