Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "what is the difference between word-break and word-wrap". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

First, let's take a look at the property word-break, which has the following syntax:

Word-break: normal

Word-break: break-all

Word-break: keep-all

It has a total of three attribute values, several of which are explained as follows:

Normal: indicates the default value, that is, the default newline rule. Break-all: means to force line wrapping, which means to allow word breaks between any non-text (such as URL type, etc.). Keep-all: also means line wrapping, but word wrapping in the text is not allowed, only at half-width spaces or hyphens.

Among these three attribute values, break-all is supported by all browsers, but keep-all is not. Although there has been some development and progress, word-break: keep-all is not suitable for mobile devices at present.

All right, now let's talk about another protagonist, word-wrap, whose grammar is as follows:

Word-wrap: normal

Word-wrap: break-word

Several of these attribute values are specifically explained as follows: normal: is the default value, which is the normal line wrap rule. Break-word: indicates that a line break occurs when there is really no other reliable line break point in a word.

In fact, you will find that word-break and word-wrap actually look alike, and the attribute value is also similar, in fact, the word-wrap attribute is also a story, it and word-break look too similar, it is inevitable that people can not remember or confused, so in the CSS3 specification, the name of this attribute has been modified, called overflow-wrap. Although the name of this new attribute has been changed to make the semantics more accurate, it is also easier to distinguish and remember. In addition, browsers with WebKit kernels such as Chrome and Safari only support this new attribute. So, although you have a new name that looks good and easy to use, you should use word-wrap obediently for the sake of compatibility.

Let's continue to nag. What's the difference between these attributes? Word-break: break-all and word-wrap: break-word. First of all, the two look alike, both have word, both have break, and the position is the same, one has two break, the other has two word;, and the function of the two is also similar. these two declarations can wrap consecutive English characters, so what is the difference between them? Let's give you an example: dsdfsfdsfsf.

Code show 1:

* {

Margin: 0

Padding: 0

}

.box {

Width: 200px

Height: 200px

Background: orange

Margin: 100px auto

Padding: 20px

Word-break: break-all

}

Code demonstration 2:

* {

Margin: 0

Padding: 0

}

.box {

Width: 200px

Height: 200px

Background: orange

Margin: 100px auto

Padding: 20px

Word-wrap: break-word

}

This is the end of the content of "what's the difference between word-break and word-wrap". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.