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

This article mainly introduces the relevant knowledge of "what is the difference between word-wrap and word-break in CSS". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "what is the difference between word-wrap and word-break in CSS" can help you solve the problem.

The difference between word-wrap and word-break

Both word-break:break-all and word-wrap:break-word are written to wrap English sentences when the parent is not wide enough. Both attributes wrap the text, but there are subtle differences, and most of the time you can't tell the difference when you first come into contact with the two attributes.

Difference:

The function of word-wrap:break-word is to force text wrapping. In general, when the width of the parent is not enough, no matter the automatic line wrapping of the English word is when the whole word is not enough, the whole word wraps to the next line together, which seems to be a very reasonable way to write, but in some cases unexpected situations will occur. That is, when the length of an English word exceeds the length of the parent container, the English word will still display a whole word and cause it to go beyond the container range.

Another situation is that when a word is very long, the word automatically wraps, leaving a lot of space in the previous line. In this case, IE creates a new attribute, word-break:break-all, which forces text wrapping, whether or not a sentence reaches the width of the parent container as a whole word, forcing the word to break the sentence. If a word exceeds the width of the parent container, it will break the word and break the line.

Give an example

1. Without giving him any style, we can see that the super-long word has overflowed the parent container.

2. Now we add word-wrap:break-word to him, and you will find that the extra part of the super-long word will be displayed on the next line.

Word-wrap:break-word

This is the end of the content about "what is the difference between word-wrap and word-break in CSS". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.