CSS 基础教程

CSS 盒子模型

CSS3基础教程

CSS 参考手册

CSS @规则(RULES)

CSS word-wrap(自动换行)

CSS word-wrap属性用于将长单词打断并自动换行到下一行。当不可破坏的字符串太长而无法容纳在容纳盒中时,此属性用于防止溢出。

CSS文字换行值

描述
normal此属性仅用于在允许的断点处断开单词。
break-word它用于打断牢不可破的单词。
initial它用于将此属性设置为其默认值。
inherit它从其父元素继承此属性。

CSS 自动换行在线示例

<!DOCTYPE html>
<html>
<head>
<style> 
p.test {
    width: 11em;
    background-color: #ff9900; 
    border: 1px solid #ffffff;
    padding:10px;
    word-wrap: break-word;
}
</style>
</head>

<p class="test"> In this paragraph, there is a very long word:
 iamsooooooooooooooooooooooooooooooolongggggggggggggggg.The long word will break and wrap to the next line.</p>

</html>
测试看看

输出:

在这一段中,有一个很长的单词:iamsooooooooooooooooooooooooooooooooooooolongggggggggggggggg.long这个单词会折断并绕到下一行。