Last Updated: February 25, 2016
· ipetepete

Make word-wrap: break-word work in responsive layouts

Thanks to @ChrisCoyier for this one!

I had an issue with user content breaking layouts, and setting a hard width to a container to make the text wrap wasn't an option, of course, you could media query every single screen width, but I like this solution better.....

html { 
  -ms-word-break: break-all; 
  word-break: break-all; 
  word-break: break-word; /* old webkit */ 

Sets all content to force word wrap (may not work in every case, but this might keep you from writing a ton of media queries).

3 Responses
Add your response

My understanding is that the -ms isn't needed... From what I can tell, it was supported all the way back to ie5. Have you found otherwise?

over 1 year ago ·

Thank You. Helped me a lot

over 1 year ago ·

Ok. I almost never post on blogs, but man you saved my life here. Thank you so much. SO MUCH. Jesus Christ this is wonderful.

over 1 year ago ·