CODEWITHSUNDEEP
css
user2806465
user2806465

Reputation: 115

Can I break the line at special characters using CSS?

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

Upvotes: 11

Views: 15340

Answers (4)

barjak
barjak

Reputation: 11270

You can use wbr elements to indicate where you want the text to break.

Upvotes: 0

cybersoft
cybersoft

Reputation: 1473

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.

Upvotes: 2

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

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>

Upvotes: 2

Zig Mandel
Zig Mandel

Reputation: 19835

There are ways to do this. Both will not force the line break:

  1. use a zero-width space like ​ after every special character you wish to behave as a word-break character. (thanks https://stackoverflow.com/a/28959024/2213940)
  2. Use an actual space but with a tiny font, if you wish to avoid special characters, like:

Upvotes: 2

Related Questions