【css】 css中换行

容易混淆的几个换行属性

word-break:break-all；/* 单词内换行 */
word-wrap:break-word;/* 以单词/网址/换行 */
white-space:pre-wrap;/* 保留空白 */
white-space:nowrap; /* 不换行 */

<!DOCTYPE html>
<html>
<head>
<style> 
.wrap{
    width:11em; 
    border:1px solid #000000;
}

p.test1{
    word-wrap:break-word;
}

p.test2{    
    word-break:break-all;
}
p.test3{
    white-space:pre-wrap;
}
p.test4{
    white-space:nowrap;
}
</style>
</head>
<body>

<p class="wrap test1">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
<p class="wrap test2">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
<p class="wrap test3">
    <b>注释：</b>
    目前 Opera 不支持 word-break 属性。

</p>
<p class="wrap test4">
    <b>注释：</b>
    目前 Opera 不支持 word-break 属性。

</p>

</body>
</html>

View Code

效果图