Is it possible in pure CSS (pseudo-elements allowed, just no additional HTML mark-up) to set a limit to the line-breaks a string can take. In other words, how many times a string can be split when wrapping.
i-love-yellow-bananas
This can normally break at the dash:
i-
love-yellow-bananas
i-
love-
yellow-bananas
i-
love-
yellow-
bananas
but it would be nice if you could specify a limit. Let's say I set the limit to 2
, then the ouput could only be:
i-love-yellow-bananas
i-
love-yellow-bananas
i-
love-
yellow-bananas
and not
i-
love-
yellow-
bananas
because in that case the string is split 3 times, which is more than my given 2.
Some wonder why, and even though this is for "funzies", here is a use-case:
I have data that's fetched from a server. As you can guess, this is some basic tabular data in a huge HTML table. One of the columns is an ID, consisting of many characters, separated by dashes. The browser will see these dashes and think "Oh, that's a nice break point. Let's break here!" and even though you don't mind a break or two, you don't want to go over the top (as browsers tend to do when breaking lines), so you wish to limit the level in which the browser looks for the easy way out (i.e. easy break points in this vulnerable column).
I think that it is not possible to do that in pure css. Check this page which describes all possibilities for text manipulation: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text
another great article: https://justmarkup.com/log/2015/07/dealing-with-long-words-in-css/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With