Donny Bahama Posted January 16, 2018 Share Posted January 16, 2018 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 More sharing options...
Ingolme Posted January 16, 2018 Share Posted January 16, 2018 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 More sharing options...
Donny Bahama Posted January 16, 2018 Author Share Posted January 16, 2018 I'll look into that. Thanks for the guidance! Link to comment Share on other sites More sharing options...
Donny Bahama Posted January 16, 2018 Author Share Posted January 16, 2018 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 - , 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 More sharing options...
dsonesuk Posted January 16, 2018 Share Posted January 16, 2018 If you use <br> to set breaks and use media queries to change to display: none or initial depending on device width Link to comment Share on other sites More sharing options...
dlgalasso Posted January 18, 2018 Share Posted January 18, 2018 word-wrap:break-word; Link to comment Share on other sites More sharing options...
Ingolme Posted January 18, 2018 Share Posted January 18, 2018 28 minutes ago, dlgalasso said: word-wrap:break-word; I'd advise that you read the questions carefully before giving answers. Link to comment Share on other sites More sharing options...
dlgalasso Posted January 19, 2018 Share Posted January 19, 2018 11 hours ago, Ingolme said: I'd advise that you read the questions carefully before giving answers. I understand those, Sorry Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now