水瓶允诺 發表於 2019-6-12 13:28:00

[转] 彻底搞懂word-break、word-wrap、white-space

<p>white-space、word-break、word-wrap（overflow-wrap）估计是css里最基本又最让人迷惑的三个属性了，我也是用了n次都经常搞混，必须系统整理一下，今天我们就把这三个属性彻底搞清楚！</p>
<h2 data-id="heading-0">测试代码</h2>
<p><strong>(文末有本文中所有例子的代码)</strong><br>下面是本文中用于测试三个样式属性展现情况的html代码：</p>
<div>
<pre class="hljs htmlbars"><code class="hljs htmlbars copyable xml" lang="htmlbars"><span class="xml"><span class="hljs-tag"><span class="hljs-tag">&lt;<span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">div <span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">id=<span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"box"&gt;
Hi&amp;nbsp;&amp;nbsp;,
This   is a incomprehensibilities long word.
<span class="hljs-tag"><span class="hljs-tag">&lt;/<span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">br&gt;
你好&amp;nbsp;&amp;nbsp;，
这   是一个不可思议的长单词
<span class="hljs-tag"><span class="hljs-tag">&lt;/<span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">div&gt;<span class="copy-code-btn">复制代码</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre>
</div>
<p><br>现在只给了它一个宽度和边框，没有其它任何样式，下面是它目前的展现情况：<br><img class="lazyload inited loaded" src="https://user-gold-cdn.xitu.io/2018/8/31/1658f3d4c0eb8c15?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="" data-src="https://user-gold-cdn.xitu.io/2018/8/31/1658f3d4c0eb8c15?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" data-width="326" data-height="234"><br>可以看到，<code>nbsp;</code>和<code>&lt;/br&gt;</code>可以正常发挥作用，而连续的空格会被缩减成一个（比如This和is之间的三个空格变成了一个），换行符也全都无效。句子超过一行后会自动换行，而长度超过一行的单个单词会超出边界。<br>接下来我们看下， 给它上面三个css属性赋值后会出现什么变化。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2 data-id="heading-1">white-space</h2>
<p>正如它的名字，<strong>这个属性是用来控制空白字符的显示的</strong>，同时还能控制是否自动换行。它有五个值：<code>normal | nowrap | pre | pre-wrap | pre-line</code>。因为默认是<code>normal</code>，所以我们主要研究下其它四种值时的展现情况。</p>
<p>（为了方便比较，下文所有图，左侧为<code>normal</code>即初始情况，右侧为赋上相应值时的情况）</p>
<p>先看下<code>white-space:nowrap</code>时的情况：</p>
<p>
<img class="lazyload inited loaded" src="https://user-gold-cdn.xitu.io/2018/8/31/1658f3d4c013f93e?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="" data-src="https://user-gold-cdn.xitu.io/2018/8/31/1658f3d4c013f93e?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" data-width="1086" data-height="238"></p>
<p>不仅空格被合并，换行符无效，连原本的自动换行都没了！只有<code>&lt;/br&gt;</code>才能导致换行！所以这个值的表现还是挺简单的，我们可以理解为<code>永不换行</code>。</p>
<p><code>white-space:pre</code>：</p>
<p>
<img class="lazyload inited loaded" src="https://user-gold-cdn.xitu.io/2018/8/31/1658f3d4bc86630a?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="" data-src="https://user-gold-cdn.xitu.io/2018/8/31/1658f3d4bc86630a?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" data-width="1072" data-height="368"></p>
<p>空格和换行符全都被保留了下来！不过自动换行还是没了。保留，所以<code>pre</code>其实是<code>preserve</code>的缩写，这样就好记了。</p>
<p><code>white-space:pre-wrap</code>：</p>
<p>
<img class="lazyload inited loaded" src="https://user-gold-cdn.xitu.io/2018/8/31/1658f3d4bdce8cfc?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="" data-src="https://user-gold-cdn.xitu.io/2018/8/31/1658f3d4bdce8cfc?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" data-width="706" data-height="500"></p>
<p>显然<code>pre-wrap</code>就是<code>preserve</code>+<code>wrap</code>，保留空格和换行符，且可以自动换行。</p>
<p><code>white-space:pre-line</code>：</p>
<p>
<img class="lazyload inited loaded" src="https://user-gold-cdn.xitu.io/2018/8/31/1658f3d4b92f14ef?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="" data-src="https://user-gold-cdn.xitu.io/2018/8/31/1658f3d4b92f14ef?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" data-width="708" data-height="456"></p>
<p>空格被合并了，但是换行符可以发挥作用，<code>line</code>应该是<code>new line</code>的意思，自动换行还在，所以<code>pre-line</code>其实是<code>preserve</code>+<code>new line</code>+<code>wrap</code>。</p>
<p><strong>我整理了一个表予以总结：</strong></p>
<table>
<thead>
<tr><th>是否能发挥作用</th><th>换行符</th><th>空格</th><th>自动换行</th><th>&lt;/br&gt;、nbsp;</th></tr>

</thead>
<tbody>
<tr>
<td>normal</td>
<td>×</td>
<td>×（合并）</td>
<td>√</td>
<td>√</td>

</tr>
<tr>
<td>nowrap</td>
<td>×</td>
<td>×（合并）</td>
<td>×</td>
<td>√</td>

</tr>
<tr>
<td>pre</td>
<td>√</td>
<td>√</td>
<td>×</td>
<td>√</td>

</tr>
<tr>
<td>pre-wrap</td>
<td>√</td>
<td>√</td>
<td>√</td>
<td>√</td>

</tr>
<tr>
<td>pre-line</td>
<td>√</td>
<td>×（合并）</td>
<td>√</td>
<td>√</td>

</tr>

</tbody>

</table>
<p>&nbsp;</p>
<h2 data-id="heading-2">word-break</h2>
<p>从这个名字可以知道，<strong>这个属性是控制单词如何被拆分换行的</strong>。它有三个值：<code>normal | break-all | keep-all</code>。</p>
<p><code>word-break:keep-all</code>：</p>
<p>
<img class="lazyload inited loaded" src="https://user-gold-cdn.xitu.io/2018/8/31/1658f3d4b948a69c?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="" data-src="https://user-gold-cdn.xitu.io/2018/8/31/1658f3d4b948a69c?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" data-width="744" data-height="234"></p>
<p><strong>所有“单词”一律不拆分换行</strong>，注意，我这里的“单词”包括连续的中文字符（还有日文、韩文等），或者可以理解为<strong>只有空格可以触发自动换行</strong></p>
<p><code>word-break:break-all</code>：</p>
<p>
<img class="lazyload inited loaded" src="https://user-gold-cdn.xitu.io/2018/8/31/1658f3d556a7e0a2?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="" data-src="https://user-gold-cdn.xitu.io/2018/8/31/1658f3d556a7e0a2?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" data-width="676" data-height="234"></p>
<p><strong>所有单词碰到边界一律拆分换行</strong>，不管你是<code>incomprehensibilities</code>这样一行都显示不下的单词，还是<code>long</code>这样很短的单词，只要碰到边界，都会被强制拆分换行。所以用<code>word-break:break-all</code>时要慎重呀。</p>
<p><br>这样的效果好像并不太好呀，能不能就把incomprehensibilities拆一下，其它的单词不拆呢？那就需要下面这个属性了：</p>
<p>&nbsp;</p>
<h2 data-id="heading-3">word-wrap（overflow-wrap）</h2>
<p><code>word-wrap</code>又叫做<code>overflow-wrap</code>：</p>
<blockquote>
<p>word-wrap 属性原本属于微软的一个私有属性，在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap 。 word-wrap 现在被当作 overflow-wrap 的 “别名”。 稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法。</p>

</blockquote>
<p><strong>这个属性也是控制单词如何被拆分换行的</strong>，实际上是作为<code>word-break</code>的互补，它只有两个值：<code>normal | break-word</code>，那我们看下<code>break-word</code>：</p>
<p>
<img class="lazyload inited loaded" src="https://user-gold-cdn.xitu.io/2018/8/31/1658f3d571f68587?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="" data-src="https://user-gold-cdn.xitu.io/2018/8/31/1658f3d571f68587?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" data-width="678" data-height="234"></p>
<p>终于达到了上文我们希望的效果，<strong>只有当一个单词一整行都显示不下时，才会拆分换行该单词</strong>。<br>所以我觉得<code>overflow-wrap</code>更好理解好记一些，overflow，只有长到溢出的单词才会被强制拆分换行！</p>
<p>（其实前面的<code>word-break</code>属性除了列出的那三个值外，也有个<code>break-word</code>值，效果跟这里的<code>word-wrap:break-word</code>一样，然而只有Chrome、Safari等部分浏览器支持）</p>
<p>&nbsp;</p>
<h2 data-id="heading-4">总结</h2>
<p>最后总结一下三个属性</p>
<ul>
<li>white-space，<strong>控制空白字符的显示</strong>，同时还能控制是否自动换行。它有五个值：<code>normal | nowrap | pre | pre-wrap | pre-line</code></li>
<li>word-break，<strong>控制单词如何被拆分换行</strong>。它有三个值：<code>normal | break-all | keep-all</code></li>
<li>word-wrap（overflow-wrap）<strong>控制长度超过一行的单词是否被拆分换行</strong>，是<code>word-break</code>的补充，它有两个值：<code>normal | break-word</code></li>

</ul>
<p>相信读完了本文，你应该对white-space、word-break、word-wrap有比较系统的认识了吧，如果短时间还是记不住，收藏一下常看看就能记住的XD~如果你喜欢这篇文章的话，希望能点个赞~</p>
<p>&nbsp;</p>
<p>以后会定期整理总结一些疑难知识点~欢迎关注~</p>
<p>&nbsp;</p>
<p>下面是本文里所有例子的代码的地址，每个属性做成了选项，方便操作学习~</p>
<p>https://codepen.io/YGYOOO/pen/jvyrWK</p>
<p><img class="lazyload inited loaded" src="https://user-gold-cdn.xitu.io/2018/8/31/1658f4927456335c?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="" data-src="https://user-gold-cdn.xitu.io/2018/8/31/1658f4927456335c?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" data-width="1280" data-height="487"></p>
<p>&nbsp;</p>
<p></audio></p><br><br>
来源：https://www.cnblogs.com/chris-oil/p/11009068.html
頁: [1]
查看完整版本: [转] 彻底搞懂word-break、word-wrap、white-space