word-break

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

* Some parts of this feature may have varying levels of support.

CSS 属性 word-break 指定了怎样在单词内断行。

尝试一下

语法

css
/* 关键字值 */
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: auto-phrase; /* 实验性 */
word-break: break-word; /* 已弃用 */

/* 全局值 */
word-break: inherit;
word-break: initial;
word-break: revert;
word-break: revert-layer;
word-break: unset;

normal

使用默认的断行规则。

break-all

对于 non-CJK (CJK 指中文/日文/韩文) 文本,可在任意字符间断行。

keep-all

CJK 文本不断行。Non-CJK 文本表现同 normal

break-word 已弃用

他的效果是word-break: normaloverflow-wrap: anywhere 的合,不论 overflow-wrap的值是多少。

备注:word-break: break-wordoverflow-wrap: break-word(详见 overflow-wrap)对比,word-break: break-word 将在文本可能溢出其容器的确切位置创建一个断点。

形式定义

初始值normal
适用元素所有元素
是否是继承属性
计算值as specified
动画类型离散值

形式语法

word-break = 
normal |
keep-all |
break-all |
break-word

示例

HTML

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

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

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

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

CSS

css
.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;
}

规范

Specification
CSS Text Module Level 3
# word-break-property

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
word-break
auto-phrase
Experimental
break-all
break-word
Deprecated
keep-all
normal

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
Deprecated. Not for use in new websites.
See implementation notes.

参见