Set the maximum number of allowed line breaks in a string wrapper

Is it possible in pure CSS (valid pseudo-elements, without additional HTML markup) to set a limit on line breaks that a line can accept. In other words, how many times a string can be split when wrapping.

i-love-yellow-bananas

This can usually be broken into dashes:

i- love-yellow-bananas i- love- yellow-bananas i- love- yellow- bananas 

but it would be nice if you could specify a restriction. Let's say I set the limit to 2 , then the only way out would be:

 i-love-yellow-bananas i- love-yellow-bananas i- love- yellow-bananas 

but not

 i- love- yellow- bananas 

because in this case the line is divided 3 times, which is more than my given 2.

Some wonder why, and although this is for "funzies", here is an example of use:

I have data received from the server. As you can guess, these are some basic tabular data in a huge HTML table. One of the columns is an identifier consisting of many characters separated by dashes. The browser will see these dashes and think: β€œOh, this is a good breakpoint. And even though you are not against a break or two, you don’t want to jump from above (usually browsers use when breaking lines), so you want to limit the level where the browser is looking for an easy way (i.e. simple breakpoints in this vulnerable column).

+5
source share
1 answer

I think this cannot be done in pure css. Check out this page that describes all the features for word processing: 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/

+1
source

Source: https://habr.com/ru/post/1247866/


All Articles