---
title: word-break
slug: Web/CSS/word-break
tags:
  - CSS
  - CSS 属性
translation_of: Web/CSS/word-break
---
<div>{{CSSRef}}<br>
 </div>

<p> CSS 属性 <code>word-break</code> 指定了怎样在单词内断行。</p>

<div>{{EmbedInteractiveExample("pages/css/word-break.html")}}</div>



<h2 id="语法">语法</h2>

<pre class="notranslate">/* Keyword values */
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: break-word; /* deprecated */

/* Global values */
word-break: inherit;
word-break: initial;
word-break: unset;</pre>

<h3 id="值">值</h3>

<dl>
 <dt><code>normal</code></dt>
 <dd>使用默认的断行规则。</dd>
 <dt><code>break-all</code></dt>
 <dd>对于non-CJK (CJK 指中文/日文/韩文) 文本，可在任意字符间断行。</dd>
 <dt><code>keep-all</code></dt>
 <dd>CJK 文本不断行。 Non-CJK 文本表现同 <code>normal</code>。</dd>
 <dt><code>break-word</code> {{Deprecated_Inline}}</dt>
 <dd>他的效果是<code>word-break: normal</code> 和 <code>overflow-wrap: anywhere</code>  的合，不论 {{cssxref("overflow-wrap")}}的值是多少。</dd>
</dl>

<div class="blockIndicator note">
<p>注意：与 <code>word-break: break-word</code> 和 <code>overflow-wrap: break-word</code>（详见 {{cssxref("overflow-wrap")}}）对比，<code>word-break: break-word</code> 将在文本可能溢出其容器的确切位置创建一个断点。</p>
</div>

<h2 id="规范">规范</h2>

<p>{{CSSInfo}}</p>

<h2 id="正式语法">正式语法</h2>

{{csssyntax}}

<h2 id="示例">示例</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html notranslate">&lt;p&gt;1. &lt;code&gt;word-break: normal&lt;/code&gt;&lt;/p&gt;
&lt;p class="normal narrow"&gt;This is a long and
 Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
 グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉&lt;/p&gt;

&lt;p&gt;2. &lt;code&gt;word-break: break-all&lt;/code&gt;&lt;/p&gt;
&lt;p class="breakAll narrow"&gt;This is a long and
 Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
 グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉&lt;/p&gt;

&lt;p&gt;3. &lt;code&gt;word-break: keep-all&lt;/code&gt;&lt;/p&gt;
&lt;p class="keepAll narrow"&gt;This is a long and
 Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
 グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉&lt;/p&gt;

&lt;p&gt;4. &lt;code&gt;word-break: break-word&lt;/code&gt;&lt;/p&gt;
&lt;p class="breakWord narrow"&gt;This is a long and
  Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
 グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉&lt;/p&gt;</pre>

<h3 id="CSS">CSS</h3>

<pre class="notranslate">.narrow {
  padding: 10px;
  border: 1px solid;
  width: 500px;
  margin: 0 auto;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 1px;
}

.normal {
  word-break: normal;
}

.breakAll {
  word-break: break-all;
}

.keepAll {
  word-break: keep-all;
}

.breakWord {
  word-break: break-word;
}</pre>

<p>{{EmbedLiveSample('Examples', '100%', 600)}}</p>

<h2 id="规范_2">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">注释</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Text', '#word-break-property', 'word-break')}}</td>
   <td>{{Spec2('CSS3 Text')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>



<p>{{Compat("css.properties.word-break")}}</p>

<h2 id="相关链接">相关链接</h2>

<ul>
 <li>{{cssxref("overflow-wrap")}}</li>
</ul>