diff options
Diffstat (limited to 'files/zh-cn/web/css/overflow-wrap/index.html')
| -rw-r--r-- | files/zh-cn/web/css/overflow-wrap/index.html | 147 |
1 files changed, 147 insertions, 0 deletions
diff --git a/files/zh-cn/web/css/overflow-wrap/index.html b/files/zh-cn/web/css/overflow-wrap/index.html new file mode 100644 index 0000000000..5c2c0c687d --- /dev/null +++ b/files/zh-cn/web/css/overflow-wrap/index.html @@ -0,0 +1,147 @@ +--- +title: overflow-wrap +slug: Web/CSS/word-wrap +tags: + - CSS Text Module Level 3 + - CSS3 + - W3C + - overflow-wrap + - word-wrap +translation_of: Web/CSS/overflow-wrap +--- +<div>{{CSSRef}}</div> + +<div></div> + +<p>{{EmbedInteractiveExample("pages/css/overflow-wrap.html")}}</p> + +<div class="hidden"> +<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> +</div> + +<p><a href="/en/CSS" title="CSS">CSS</a> 属性 <code><strong>overflow</strong></code><strong><code>-wrap</code></strong> 是用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行。</p> + +<div class="blockIndicator note"> +<p>与{{cssxref("word-break")}}相比，<code>overflow-wrap</code>仅在无法将整个单词放在自己的行而不会溢出的情况下才会产生中断。</p> +</div> + +<div class="note"><strong>注：</strong><strong style="color: rgba(0, 0, 0, 0.65098); font-style: italic;">word-wrap 属性原本属于微软的一个私有属性，在 CSS3 现在的文本规范草案中已经被重名为 {{cssxref("overflow-wrap")}} 。 word-wrap 现在被当作 overflow-wrap 的 “别名”。 稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法。</strong></div> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="notranslate"><code>/* Keyword values */ +overflow-wrap: normal; +overflow-wrap: break-word; + +/* Global values */ +overflow-wrap: inherit; +overflow-wrap: initial; +overflow-wrap: unset;</code> + +</pre> + +<p>将 <code>overflow-wrap</code> 属性指定为从下面的值列表中选择的单个关键字。</p> + +<h3 id="Values" name="Values">值</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>行只能在正常的单词断点处中断。（例如两个单词之间的空格）。</dd> + <dt><code>break-word</code></dt> + <dd>表示如果行内没有多余的地方容纳该单词到结尾，则那些正常的不能被分割的单词会被强制分割换行。</dd> +</dl> + +<h2 id="形式语法">形式语法</h2> + +<pre class="notranslate">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">示例</h2> + +<h3 id="比较_overflow-wrap、word-break_和_hyphens">比较 overflow-wrap、word-break 和 hyphens</h3> + +<p>本示例比较分解长单词时，<code>overflow-wrap</code>, <code>word-break</code>, <code>hyphens</code> 的结果。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="notranslate"><p>They say the fishing is excellent at + Lake <em class="normal">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, + though I've never been there myself. (<code>normal</code>)</p> +<p>They say the fishing is excellent at + Lake <em class="ow-anywhere">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, + though I've never been there myself. (<code>overflow-wrap: anywhere</code>)</p> +<p>They say the fishing is excellent at + Lake <em class="ow-break-word">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, + though I've never been there myself. (<code>overflow-wrap: break-word</code>)</p> +<p>They say the fishing is excellent at + Lake <em class="word-break">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, + though I've never been there myself. (<code>word-break</code>)</p> +<p>They say the fishing is excellent at + Lake <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, + though I've never been there myself. (<code>hyphens</code>, without <code>lang</code> attribute)</p> +<p lang="en">They say the fishing is excellent at + Lake <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, + though I've never been there myself. (<code>hyphens</code>, English rules)</p> +<p class="hyphens" lang="de">They say the fishing is excellent at + Lake <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, + though I've never been there myself. (<code>hyphens</code>, German rules)</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="notranslate">p { + width: 13em; + margin: 2px; + background: gold; +} + +.ow-anywhere { + overflow-wrap: anywhere; +} + +.ow-break-word { + overflow-wrap: break-word; +} + +.word-break { + word-break: break-all; +} + +.hyphens { + hyphens: auto; +}</pre> + +<h4 id="结果">结果</h4> + +<p>{{ EmbedLiveSample('Comparing_overflow-wrap_word-break_and_hyphens', '100%', 260) }}</p> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Text', '#propdef-overflow-wrap', 'overflow-wrap') }}</td> + <td>{{ Spec2('CSS3 Text') }}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> + +<p>{{Compat("css.properties.overflow-wrap")}}</p> + +<h2 id="See_also" name="See_also">另参见</h2> + +<ul> + <li>{{cssxref("word-break")}}</li> + <li>{{cssxref("hyphens")}}</li> + <li>{{cssxref("text-overflow")}}</li> +</ul> |