Home >Web Front-end >HTML Tutorial >[CSS] The problem of div layer boundary controlling English line breaks_html/css_WEB-ITnose
[CSS] The problem of div layer boundary controlling English line breaks_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:51:351207browse
I don’t know if I haven’t written the English version of the webpage.
I don’t know if I have written it.
In the webpage, if you put the English version in the div,
div adopts the priority principle for long words.
allows long English words to exceed the width of my div.
For example, the following code:
<div style="width:100px; background:#dddddd">I am a looooooooooooooooooooooooooooooooooooooooong word!</div>
Originally I set the width of this layer to 100px. I hope that everything in it will wrap automatically when encountering the boundary, which will give the following effect:
But the following effect was obtained:
This is because div does not interrupt long words by default and allows them to overflow by default.
In order to make this To make the boundary stricter, we must add word-break:break-all or word-wrap:break-word; attributes to the style of this layer. Even IE5.5 supports these two attributes, but I don’t know why Adobe Dreamweaver CS5 does not have this code prompt.
word-break:break-all, breaks based on letters, and each letter can be broken, such as "I am a looooooog looooooooooooooooooooooooooooooooooong word!":
break -all is like this:
The code is as follows:
<div style="width:100px; background:#dddddd; word-break:break-all;">I am a looooooog looooooooooooooooooooooooooooooooooooooooong word!</div>
Another one is word-wrap:break-word;, which is compared to word-break:break-all, uses words as the breaking unit, which is like word and other editors. This breaking method is more in line with Westerners' habits, but for For me, the above word-break:break-all is more beautiful. For some long words that cannot be processed, it has to be broken in letter units:
The code is as follows:
<div style="width:100px; background:#eeeeee; word-wrap:break-word;">I am a looooooog looooooooooooooooooooooooooooooooooooooooong word!</div>
The following is the comparison and code of the three effects. The layer is deliberately painted with a gray background so that everyone can see the width clearly. , the first is to add no attributes, one is to add word-break:break-all in style, and the other is to add word-wrap:break-word;:
breakword I am a looooooog looooooooooooooooooooooooooooooooooooooooong word!<div style="width:100px; background:#dddddd; word-break:break-all;">I am a looooooog looooooooooooooooooooooooooooooooooooooooong word!</div>I am a looooooog looooooooooooooooooooooooooooooooooooooooong word!