HTML tag or technique like <wbr> but for a line break?

user_5506400 0
Viewed 145

I often find I wish to control how a sentence breaks/wraps, e.g.:

Hello there Mr Nemesis X, welcome to the interwebs!

If the viewport is narrow, I would like it to wrap after the comma, so the two logical lines are together:

i.e. GOOD: Only if the viewport is too narrow to show the whole screen

Hello there Mr Nemesis X,                |<----- viewport width
welcome to the interwebs!

BAD:

Hello there Mr Nemesis X, welcome to the |<----- viewport width
interwebs!

At the moment I place the two sentences in two <span>s, and use flex to ensure they wrap together, what a mission for something I often do. I learnt about <wbr>, which sounds like it could work if I replace all the spaces with say &nbsp;, but its not what it was defined for. Theres <br>, but that always breaks. So I am looking for something like a "line break", say <lbr> (doesnt exist), which if the line needs to wrap, it says hey, heres a good place to break the line.

html
4 Answers

You maybe can use \n after the coma.

user_146013880

You can use a <br> html tag to break a line!

user_136126910

The way your code is breaking right now is accurate to a break. The <wbr> is used to break a long word up hence why you would need to add that HTML entity to break up your lines.

For what I think you want, going for that specific design aesthetic, breaking at a comma, you would need to pre-process your strings before they get written, and as the view-port updates as to add breaks where you deem necessary.

user_114042950
  1. Inserting the line break tag after the comma.
  2. Or you can use the /n after the comma.
user_146112280
Related