Can I break the line at special characters using CSS?

Question

I have a line for ex: "Break at Special Character;String Break;Example Break". I would like to break the line with respect to ";" using CSS.

Is there any possible way to do so. Please suggest

Answer 1

No, there is no ways to do so. If it would be possible to control by CSS, I think it would control wrapping with insufficient width of block. If you do not want add markup to text, you can programmatically add html newlines by using JavaScript (if there is a HTML-page) or any other one.

Answer 2

No, unfortunately CSS currently has no tools for specifying that line breaks should be allowed (or forced) after some character(s). You need to wrap characters or strings in elements and specify line breaking behavior for the elements.

The following example shows first how to force line breaks, then how to allow line breaks that would not otherwise appear. This uses generated content; there are other techniques too.

.br::after { content: "\a"; white-space: pre; } /* line break */
.bro::after { content: "\200b"; } /* zero-width space */

<p>Break at Special Character<span class=br>;</span>String Break<span class=br>;</span>Example Break</p>
<p style="width: 10em">Break at Special Character<span class=bro>;</span>String Break<span class=bro>;</span>Example Break</p>