Word breaking in English: compatibility and differences between Word-break, Word-wrap, and hyphens in CSS

CSS in the mention of word breaking, the first to be reflected in the mind is the Word-break and word-wrap these two attributes. But what's the difference between these two properties, and how compatible, I've always had a vague concept. Take the time today to make a note of the difference between these and the new break attributes in CSS3 taken care clear.

In English paragraphs, you sometimes encounter some very long words that are longer than the width of the container. In the default page document, if the word length exceeds a single line, it is automatically moved to the next line, puzzling! is automatically wrapped, and if the length of the word itself is beyond the width of the container, the normal document is not binding, the figure dddddd ... This word is overflowing :

In order to keep this extra-long word out of the container width, you can force a break with Word-break:break-all.

But forcing the line to break the complete word, will affect reading, and once used Word-break:break-all, the word line will be very high frequency (puzzling! this word is not a long word, also be easily interrupted). All we need is to force a line break when the length of the word itself exceeds the width of the container, and in general, it is only necessary to determine whether the following words need to be wrapped according to the space, so use Word-wrap:break-word to:

So with a word-wrap:break-word, you can meet the most basic line of the page to change the layout.

Let's go a little deeper. When reading English teacher has taught us, English writing in the line, in order to save paper, each line of the last lattice is also used up, you can not write the word added a horizontal bar "-" in the next line to continue to write the word. Is there a way to implement it in the Web? The answer is still there, but it's a CSS3 attribute: Hyphens:auto
Hyphens is currently more limited browser support, the current version of Google Chrome is not supported, as far as I test in Firefox,ie10+,safari is still supported, but to add a few familiar prefixes to her:

1234	-moz-hyphens:auto;-ms-hyphens:auto;-webkit-hyphens:auto;hyphens:auto;

The encoding of the page also needs to be written in the language allowed in this format:

1

So puzzling! this word in the browser that supports hyphens automatically adds a horizontal bar break:

With Word-wrap:break-word, is the general layout effect we need:

1234567

div {-moz-hyphens:auto;-ms-hyphens:auto;-webkit-hyphens:auto;hyphens:auto;word-wrap:break-word;}

In addition, hyphens also has an interesting value: manual, you can use special symbols to add a word to the words artificially, but the personal feel very little can be used. Refer to Mozilla's official documentation, which also contains a list of browser compatibility

The example code for this article is here: http://blog.brain1981.com/wp-content/uploads/css-wordBreak.html. You can open this page in a different browser to see the difference between word breaking.

All articles of this site are original, welcome reprint, but please indicate the source of the article: http://blog.brain1981.com/706.html

Word breaking in English: compatibility and differences between Word-break, Word-wrap, and hyphens in CSS