Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Set maximum amount of allowed line-breaks in string wrapping

Tags:

css

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).

like image 428
Bram Vanroy Avatar asked Nov 09 '22 16:11

Bram Vanroy


1 Answers

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/

like image 160
sQer Avatar answered Nov 15 '22 07:11

sQer