How to use word-break to break word if too long CSS tricks

This article was written by in February 23, 2015, & may not be posted on other sites!
Original source url for this article: How to use word-break to break word if too long CSS tricks

How to use word-break to break word if too long CSS tricks
The wordbreak CSS property specifies line breaking rules and will help you to break words as you wish, but the standard solution may not work. This is how to use word-break to break word if too long CSS tricks.

How to use word-break to break word if too long CSS tricks

 

Standard solution on word-break CSS property

#your-word{
word-break: break-all;
}

The word-break values avalable:

normal     Default value. Break words according to their usual rules
break-all     Lines may break between any two letters
keep-all      Breaks are prohibited between pairs of letters
initial     Sets property to its default value.
inherit     Inherits this property from its parent element.

 

 

Solution – How to use word-break to break word if too long css

Just add some more CSS code to complete the word-break property in all browsers.
Something like this:
#your-word{
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
line-height: 1.2em;
}

 

Spread the word

Facebooktwittergoogle_pluslinkedinmail

Leave a Reply

Your email address will not be published. Required fields are marked *