word-wrap

摘要

word-wrap 是 css/properties/overflow-wrap 的别名，它定义了当内容超出容器边界时是否允许断词。

概述表

初始值: normal
适用范围: 所有元素
继承: 是
媒体: 视觉
计算值: 指定值
可动画: 否
CSS 对象模型属性: wordWrap

语法

word-wrap: break-word
word-wrap: normal

值

normal: 默认值。行只能在正常的断点处断开（空格、非字母数字字符等）。
break-word: 超出容器宽度的单词将被任意断开以适应容器的边界。

示例

这是应用于示例的样式规则。

.NormalValue        { word-wrap:normal;     background-color:lightgray; }
.WithBreaks         { word-wrap:break-word; background-color:lightgray; }
.NormalValueNarrow  { word-wrap:normal;     background-color:lightgray; width:10px }
.WithBreaksNarrow   { word-wrap:break-word; background-color:lightgray; width:10px }
.WithBreaksNoWrap    { word-wrap:break-word; background-color:lightgray; width:10px; white-space:nowrap; }
.clsLiteral          { font-family: Courier New, Courier, monospace; }

查看实时示例

以下示例展示了如何使用 css/properties/word-wrap 属性将一个长单词断成多个单词，显示在多行上。break-word 值可以避免水平滚动，并且对打印很有用。

<!doctype html>
<html>
<head>
<title>wordWrap property</title>
</head>

<body>
<div class="body">

<h1>wordWrap property</h1>
<p>
<strong>Note</strong> that the <strong>"p"</strong> elements in the examples have layout because their widths are set.
</p>

<hr />

<p>
These examples shows the <span class="clsLiteral">break-word</span> value of the <strong>wordWrap</strong> property.
</p>

<p class="WithBreaks">
LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord
</p>

<p class="WithBreaksNarrow">
blonde
</p>

<hr />
<p>
These examples show the <span class="clsLiteral">normal</span> value of the <strong>wordWrap</strong> property.
In quirks mode (transitional DOCTYPE), the field width is extended to fit the word.
</p>

<p class="NormalValue">
LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord
</p>

<p class="NormalValueNarrow">
blonde
</p>

<hr />

<p>
These examples show the <span class="clsLiteral">break-word</span> value of the
<strong>wordWrap</strong> property with <span class="clsLiteral">white-space:nowrap</span>.
</p>

<p class="WithBreaksNoWrap">
Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word
</p>

<p class="WithBreaksNoWrap">
blonde
</p>

<hr />

<p>
To clip unwrapped text to the space provided, you can use <span class="clsLiteral">overflow:hidden</span>
and <span class="clsLiteral">text-overflow:ellipsis</span>.
</p>

<p class="NormalValue" style="overflow:hidden">
LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord
</p>

<p class="NormalValue" style="overflow:hidden;text-overflow:ellipsis">
LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord
</p>

<hr/>
</div>

</body>
</html>

查看实时示例

备注

word-wrap 属性最初是为 Internet Explorer 开发的专有属性，现在用作标准化 overflow-wrap 属性的同义词。此属性允许浏览器断开否则无法断开的字符串（单词）。这与 white-space 属性不同，后者控制文本换行的开启和关闭。word-wrap 属性仅指定是否可以在单词中允许不在语言规则允许范围内的位置进行换行。

标准信息

CSS Text Level 3，第 6.2 节

署名

Microsoft Developer Network: [Windows Internet Explorer API 参考文章]

word-wrap

摘要

概述表

语法

值

示例

备注

备注

标准信息

相关规范

署名