在CSS3中自动换行有两个属性:

• word-break 让文本换行
• overflow-wrap 让长单词和URL换行

文本换行在浏览器中会自动处理， 但是他们有 2 个准则:

- 非中文的时候不在单词中间换行，

- 中文的时候不让标点符号在行首。

一. word-break

主要有以下几个属性值:

• normal 正常换行. (上面说的两个准则)

• break-all 为了防止文本溢出, 对于非CJK (CJK 指中文/日文/韩文) 文本，可在任意字符间断行。

• keep-all 对于CJK文本, 不允许换行(如果有标点符号, 可以在标点符号出换行). 其他文本, 与normal一样.

• break-word 为了防止文本溢出, 如果行内没有其他可以换行的地方, 则有可能在任何的地方换行. (chrome支持. ie,edge, firefox都不支持.不要用)

<style>
  .narrow {
      padding: 5px;
      border: 1px solid;
      width: 500px;
  }

.normal {
    word-break: normal;
}

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

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

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

<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>

二. overflow-wrap

由于历史原因, 属性名overflow-wrap以前叫word-wrap, 后来在CSS3中改成overflow-wrap

有两个值:

• normal 正常换行

• break-word 对比较长的单词或者url, 为了防止溢出, 则可能在任何地方换行.

<style>
.narrow {
    padding: 5px;
    border: 1px solid;
    width: 150px;
    word-wrap: break-word;
}

</style>
<p class="narrow">Most of this text uses short words that won't need to break. However, Antidisestablishmentarianism is
    a very long word!</p>

三. text-overflow

这个不是css3的属性.

这个属性用来处理当文本有溢出的时候, 应该如何处理溢出的文本.

这个属性不强制文本溢出, 为了有溢出必须配合其他属性使用.

overflow: hidden; white-space: nowrap;

• clip 默认值.

• ellipsis 用...来表示有溢出的文字.

<style type="text/css">

p {
    width: 105px;
    border: 1px solid #000;
    overflow: hidden;
    white-space: nowrap;
}

p:nth-child(2) {
    text-overflow: clip;
}

p:nth-child(3) {
    text-overflow: ellipsis;
}

</style>
<p>This keyword value indicates to truncate the text at the limit of the content area</p>
<p>This keyword value indicates to truncate the text at the limit of the content area</p>
<p>This keyword value indicates to truncate the text at the limit of the content area</p>