word-wrap 属性将行分成单词以适应其容器。
此属性甚至会破坏并非牢不可破的单词。
此属性可以具有正值或者负值。
正值会在单词之间添加另外的空格，而负值会删除单词之间的空格。
当设置为“normal”时，指定的字体将定义单词之间的间距。
自动换行属性是 CSS3 属性之一。
它仅在 white-space 属性允许换行时有效。
在 CSS3 中，自动换行属性称为溢出换行。
| 初始值 | normal |
|---|---|
| 应用于 | 所有元素。 |
| 继承 | 可继承 |
| 可动画的 | 无效 |
| 版本 | CSS3. |
| DOM 语法 | object.style.wordWrap = "break-word"; |
语法
word-wrap: normal | break-word | initial | inherit;
具有“正常”值的自动换行属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
width: 120px;
border: 1px solid #666;
word-wrap: normal;
}
</style>
</head>
<body>
<h2>Word-wrap 属性示例</h2>
<div>
生活本就是矛盾的,白天与黑夜间的距离,
春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。
是谁把思念翻起了浪花，一转身，浪迹天涯。
</div>
</body>
</html>
带有“break-word”值的自动换行属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div {
width: 120px;
border: 1px solid #666;
word-wrap: break-word;
}
</style>
</head>
<body>
<h2>Word-wrap 属性示例</h2>
<div>
Lorem Ipsum is
simplysimplysimplysimplysimplysimply
dummy text of the printing and typesetting
industryindustryindustryindustryindustry.
</div>
</body>
</html>
CSS word-wrap 属性值说明
| 值 | 描述 |
|---|---|
| normal | 在允许的断点中打破这些词。这是此属性的默认值。 |
| break-word | 让不可抗拒的词被打破。 |
| initial | 使属性使用其默认值。 |
| inherit | 从父母元素继承属性。 |
日期：2020-06-02 22:14:52 来源：oir作者：oir