Breaking a line of text in the middle

[Donny Bahama]

Say I have a wide div (100%) which contains a single line of text. If the screen is less than a certain width, the line will wrap. Depending on the width of the screen, there could be one long line of text with a single word on the second line. That looks crappy. Is there some way I can tell it to split the line in the middle if it won't fit on one line? Or in thirds if it won't fit on 2 lines? Or in fourths, etc.....

[Ingolme]

There is no way to do that. You could manually break it into pieces and put each piece into a <span> with the CSS white-space property set to "nowrap" but it's not a good idea since it needs to be done manually for any block of text.

A possibly better solution is to specifically set the max-width of the div for different breakpoints, so that when the screen reaches the breakpoint it becomes small enough to wrap almost two full lines, or three full lines.

There is no perfect solution, try to be creative with the properties that CSS provides.

[Donny Bahama]

I'll look into that. Thanks for the guidance!

[Donny Bahama]

Here's something interesting I tried that seems like a good start. I'll document it here in case it helps anyone else...

I broke the line of text into 4 (approx. equal length) chunks. within each chunk, I replaced the spaces with non-breaking space characters - &nbsp;, leaving actual spaces between each of the quarters. That seems to help a lot. Now I'll play with max-width and breakpoints to get it right where I want it.

[dsonesuk]

If you use <br> to set breaks and use media queries to change to display: none or initial depending on device width

[dlgalasso]

word-wrap:break-word;

[Ingolme]

28 minutes ago, dlgalasso said:

word-wrap:break-word;

I'd advise that you read the questions carefully before giving answers.

[dlgalasso]

11 hours ago, Ingolme said:

I'd advise that you read the questions carefully before giving answers.

I understand those, Sorry