CSS3 word-wrap property

 The function of the CSS3 word-wrap property is to allow very long words to be switched to the next line. Most of the browser defaults are to keep very long words intact, and directly jump to the next line or make the word exceed the DIV area. The range of the block , if neither of these two situations is the effect that the designer wants to present, there is another effect that allows the word to be "folded to the next line" without going beyond the range of the DIV block to the right , nor leaving too much The whitespace is at the end of the string, and all major browsers support the word-wrap property of CSS3 .

CSS3 word-wrap property syntax

word-wrap: Single word wrap setting;

Two setting effects are usually used, namely, keeping the word normal and letting the word be displayed in a row. The available values ​​are listed in the table below.

Available values ​​of the CSS3 word-wrap property

Set value	Description
normal	By default, the browser usually presets the word to wrap before the blank space here, and keep the complete word.
break-word	Words that are too long will automatically be folded to the next line.
initial	Set the word wrapping style to the default value.
inherit	The word-wrap style setting inherited from the parent layer is not supported by all browsers and is not recommended.

CSS3 word-wrap property example 1. Use normal effect

<meta charset="utf-8">
<style>
#DIV1{
    width:260px;
    height:80px;
    border:1px gray solid;
    word-wrap:normal;
}
</style>
<div id="DIV1">
vckwefkosrmgsirjisfjknfsjfcfnsrficvmkse .mv.ksmvksmenrf.
</div>

Example output

vckwefkosrmgsirjisfjknfsjfcfnsrficvmkse.mv.ksmvksmenrf.

In the first example, a DIV block with a width of 260px was prepared . We deliberately wrote a long English string in the block. Then, through the normal setting of the word-wrap attribute, the long English string exceeded The scope of the DIV block is actually the default effect of most browsers.

CSS3 word-wrap property example 2: use break-word effect

<meta charset="utf-8">
<style>
#DIV2{
    width:260px;
    height:80px;
    border:1px gray solid;
    word-wrap:break-word;
}
</style>
<div id="DIV2" >
vckwefkosrmgsirjisfjknfsjfcfnsrficvmkse.mv.ksmvksmenrf.
</div>

Example output

vckwefkosrmgsirjisfjknfsjfcfnsrficvmkse.mv.ksmvksmenrf.

The second example is the most critical application of the word-wrap attribute. The same DIV block and the same long English string as the first example, but with the break-word effect of the word-wrap attribute, you can easily make it out of the DIV area. The English character string in the block range is automatically folded to the next line to continue displaying.