Is there a CSS only way of breaking a word on a specific non whitespace character?

I want to split a word (e.g. THIS_PHRASE_HERE) on underscores if it overflows the div it’s inside, which is a fixed width. I know I can do word-break: break-all to split the word on any character, but that looks a little messy, especially if there’s an orphan of 1 or 2 characters at the end. I’m sure I could do this with JS, but was wondering if there’s a way of doing it in CSS only, something like word-break: "_".

>Solution :

Apparently there are no way of doing only with CSS, word-break property doesn’t have that option.
You can use the html tag <wbr> to add a work break oportunity, where the browser may optionally break a line.

Leave a Reply