Jump to content

Breaking a line of text in the middle


Donny Bahama
 Share

Recommended Posts

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.....

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...