There are a number of new attributes in CSS3, including word-break and word-wrap, which are used to wrap text, but the difference between the two is not clear to many. Today I’ll tell you how they’re different and where they should be used.

There are three attribute values of word-break, among which the meanings of several attribute values are explained as follows: normal: represents the default value, that is, the default line feed rule. Break-all: This means to break any word that is not part of the text (such as the type of address). Keep-all: Also means newline, but does not allow words in text to newline, only at halfspaces or hyphens. Among the three attribute values, break-alwww.diuxie.coml is supported by all browsers, but keep-all is not the case. Although there has been some development and progress, word-break: keep-all is not suitable for mobile terminals at present. It has two attribute values, some of which are specified as follows: normal: default value, normal line feed rule. Break-word: To break a line when there is really no other reliable break point on a line. In fact, you will find that word-break and word-wrap actually look similar, and the value of the property is also similar. In fact, word-wrap property is also very story, because it is too similar to word-break before, it will inevitably make people forget or confuse, so in the CSS3 specification, The name of this property has been changed to be called overflow-wrap. Although the new attribute name has been changed to make it more semantic accurate, is also easier to distinguish and remember. In addition, WebKit-centric browsers like Chrome and Safari only support this new property. So while the new name looks good and works well, for the time being, stick with Word-wrap for compatibility.

Through the following to continue to chatter this even a property in the end what is the difference? Word-break: break-all and word-wrap: break-word. First of all, they look very similar, both have word, both have break, mobile game position is the same, one has two break, one has two word; Second, the function of both declarations is similar. Both declarations wrap consecutive English characters. What is the difference between them? Here’s an example:

To sum up, word-break: break-all; Word-wrap :break-word is a softer, more compassionate way to break a word or character if it has a point that can break a line, such as a space. At these newline points, you don't care if you don't line up or look good, so it's easy to have a bunch of blank areas. The above is the introduction of the difference between word-break and word-wrap properties, students can choose according to the actual situation in the development process.