ISSUE :
 
Profile photo
Submitted by Bikram Shrestha
on June 12th, 2014 at 15:18:02 EST

How to break long word in HTML using CSS?

I have a page with long words which is kind of distorting the alignment of my page. I tried to use CSS "word-wrap:break-word" but this does not seems to have any effect. Any suggestion to break long word in HTML using CSS that will work in most browsers?


Profile photo
Replied by SBajra
on June 12th, 2014 at 15:37:52 EST
"word-wrap:break-word" is to break long word and wrap into next line by adjusting in such a way that it won't break in middle of the words. "word-wrap:break-word" also honor commas, hyphens, and spaces. The catch is it only works cross-browser on block-level elements and not on table cells. May be you are using "word-wrap:break-word" in table cell. In this case, you would want to try "word-break: break-all". This will break the word at the end of the word limit regardless of table cell.

Based on post at: http://css-tricks.com/almanac/properties/w/word-break, solid way for word break is:

-ms-word-break: break-all;
word-break: break-all;

// Non standard for webkit browsers only
word-break: break-word;

-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
Accepted Answer
Accepted
 Answer

Profile photo
Replied by Bikram Shrestha
on June 12th, 2014 at 15:56:35 EST
I am in fact using table. Thanks for pointing out. "word-break: break-all" worked well for my purpose. Thanks.