通常一个容器有固定的宽度和高度，如果我们需要在该容器内显示超长的文本时，就需要对该段文字进行溢出处理。

1
2
3
4
5
<div class="words">
  For a long time it seemed to me that life was about to begin , real life. But, there was always some obsacle in the
  way, something to be gotten through first, some unfinnished business, time still to be served or a debt to be paid.
  Then life would begin.
</div>

默认效果

For a long time it seemed to me that life was about to begin , real life. But, there was always some obsacle in the way, something to be gotten through first, some unfinnished business, time still to be served or a debt to be paid. Then life would begin.

单行

代码

1
2
3
4
5
6
.words {
  width: 400px;
  overflow: hidden; /*超过部分不显示*/
  text-overflow: ellipsis; /*超过部分用点点表示*/
  white-space: nowrap; /*不换行*/
}

效果

For a long time it seemed to me that life was about to begin , real life. But, there was always some obsacle in the way, something to be gotten through first, some unfinnished business, time still to be served or a debt to be paid. Then life would begin.

多行

-webkit 代码

1
2
3
4
5
6
7
8
9
// webkit
.words {
  width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /*规定超过两行的部分截断*/
  -webkit-box-orient: vertical;
}

display: -webkit-box

-webkit-box CSS 值允许将块级内容限制为指定行数。虽然不是标准的属性，但是浏览器均支持。配合 line-clamp 和 box-orient 可以实现多行截断。
由于兼容性需要，在不同浏览器中需要添加前缀。例如对于 line-clamp 属性，Chrome 通过 -webkit-line-clamp 支持，Edge 通过 -ms-line-clamp 支持，Firefox 通过 -moz-line-clamp 支持。

line-clamp

line-clamp CSS 属性允许将块内容的行数限制为指定值。

box-orient

box-orient CSS 属性设置元素是水平还是垂直地布置其内容。

-webkit 效果

For a long time it seemed to me that life was about to begin , real life. But, there was always some obsacle in the way, something to be gotten through first, some unfinnished business, time still to be served or a debt to be paid. Then life would begin.

兼容代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 兼容其它内核 padding需要根据实际情况计算
.words {
  width: 400px;
  position: relative;
  line-height: 1.4em;
  /* 高度=2倍的行高 */
  height: 2.8em;
  overflow: hidden;
}
.words::after {
  content: '...';
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0 35px 1px 0;
}

兼容代码效果

For a long time it seemed to me that life was about to begin , real life. But, there was always some obsacle in the way, something to be gotten through first, some unfinnished business, time still to be served or a debt to be paid. Then life would begin.

插件

也有一些通过js实现的截断插件，例如 jQuery.dotdotdot，Clamp.js

涉及的 CSS 属性

overflow

overflow 是一个 CSS 简写属性，用以设定当内容无法适应元素的内边距（padding box）（即溢出）时，在水平和/或垂直方向上期望的行为。
此属性是属性 overflow-x 和 overflow-y 的简写。
在使用 overflow 的各种关键字时，应注意以下细微差别：

  1. 为 overflow 指定一个非 visible（默认值）或 clip 的值会创建一个新的块格式化上下文（Block Formatting Context，BFC）。这是出于技术原因的需要；如果一个浮动元素与一个滚动元素相交，它会在每次滚动后强制重新包裹内容，从而导致滚动体验缓慢。
  2. 为了使 overflow 设置产生预期效果，块级元素必须具有：如果溢出发生在垂直方向，则需要设置高度（height 或 max-height）；如果溢出发生在水平方向，则需要设置宽度（width 或 max-width）；如果溢出发生在块方向，则需要设置块级尺寸（block-size 或 max-block-size）；或者，如果溢出发生在行内方向，则需要设置行内尺寸（inline-size 或 max-inline-size）或将 white-space 设置为 nowrap。
  3. 当一个方向（即 overflow-x 或 overflow-y）的 overflow 设置为 visible，而另一个方向的 overflow 未设置为 visible 或 clip 时，visible 值的行为会像 auto 一样。
  4. 当一个方向的 overflow 设置为 clip，而另一个方向的 overflow 未设置为 visible 或 clip 时，clip 值的行为会像 hidden 一样。
  5. JavaScript 的 Element.scrollTop 属性可用于在滚动容器中滚动内容，除非 overflow 被设置为 clip。

visible

溢出的内容不会被裁剪，可能会在元素的内边距盒之外可见。元素盒不是一个滚动容器。这是 overflow 属性的默认值。

hidden

溢出的内容在元素的内边距盒处被裁剪。没有滚动条，被裁剪的内容不可见（即内容被隐藏），但内容仍然存在。浏览器不会添加滚动条，也不允许用户通过诸如触摸屏拖拽或使用鼠标滚轮等操作来查看裁剪区域外的内容。内容可以通过编程方式滚动（例如，通过链接到锚文本、通过 Tab 键聚焦到隐藏但可聚焦的元素，或者通过设置 scrollLeft 属性或 scrollTo() 方法的值），在这种情况下，元素盒是一个滚动容器。

clip

溢出的内容在元素的溢出裁剪边缘处被裁剪，该边缘通过 overflow-clip-margin 属性定义。因此，内容会溢出元素的内边距盒，溢出的量为 overflow-clip-margin 的 <length> 值，如果未设置则为 0px。裁剪区域外的溢出内容不可见，浏览器不会添加滚动条，也不支持编程方式的滚动。不会创建新的格式化上下文。要建立一个格式化上下文，需将 overflow: clip 与 display: flow-root 一起使用。元素盒不是一个滚动容器。

scroll

溢出的内容在元素的内边距盒处被裁剪，并且可以使用滚动条将溢出的内容滚动到视图中。无论是否有内容溢出，浏览器都会显示滚动条，因此如果该值同时应用于水平和垂直方向，那么两个方向都会显示滚动条。因此，使用此关键字可以防止滚动条随着内容变化而出现和消失。打印机可能仍然会打印溢出的内容。元素盒是一个滚动容器。

auto

溢出的内容在元素的内边距盒处被裁剪，并且可以使用滚动条将溢出的内容滚动到视图中。与 scroll 不同，浏览器仅当内容溢出时才显示滚动条。如果内容能适应元素的内边距盒，它的外观与 visible 相同，但仍然会建立一个新的格式化上下文。元素盒是一个滚动容器。

text-overflow

text-overflow CSS 属性设置如何向用户表示被隐藏的溢出内容。它可以被剪裁、显示省略号 (…) 或显示自定义字符串。text-overflow 属性不会强制发生溢出。要使文本溢出其容器，必须设置其它 CSS 属性：overflow 和 white-space。text-overflow 属性仅影响在其行内排列方向（而不是框底部溢出的文本，例如）溢出块容器元素的内容。

clip

此属性的默认值。此关键字值将在内容区域的限制处截断文本，因此截断可能发生在字符中间。要在字符之间进行剪裁，如果目标浏览器支持，可以将 text-overflow 指定为空字符串：text-overflow: '';。

ellipsis

此关键字值将显示一个省略号 (‘…’, U+2026 HORIZONTAL ELLIPSIS) 来表示被剪裁的文本。省略号显示在内容区域内，减少了显示的文本量。如果没有足够的空间来显示省略号，它将被剪裁。

用于表示被剪裁文本的 <string>。该字符串显示在内容区域内，缩短了显示的文本大小。如果没有足够的空间来显示字符串本身，它将被剪裁。

white-space

white-space CSS 属性设置了元素内部空白符的处理方式。该属性指定了两件事：空白符是否以及如何合并；行是否以及如何换行。此属性是属性 white-space-collapse 和
text-wrap-mode 的简写。

normal

空白符序列会合并。源文件中的换行符与其它空白符的处理方式相同。必要时会断行以填充行框。等同于 collapse wrap 。

pre

空白符序列会保留。只有源文件中的换行符和 <br> 元素处会断行。等同于 preserve nowrap 。

pre-wrap

空白符序列会保留。在换行符、<br> 处以及必要时会断行以填充行框。等同于 preserve wrap 。

pre-line

空白符序列会合并。在换行符、<br> 处以及必要时会断行以填充行框。等同于 preserve-breaks wrap 。

overflow-wrap(word-wrap)

overflow-wrap CSS 属性适用于文本，用于设置浏览器是否应在不可中断的字符串内部插入换行符，以防止文本溢出其行框。word-wrap 是它的别名。

normal

行只能在正常的单词断点处（例如两个单词之间的空格）断开。

anywhere

为了防止溢出，一个原本不可中断的字符字符串（例如长单词或 URL）可以在任何点处断开，如果行中没有其他可接受的断点。断点处不插入连字符。计算最小内容固有尺寸时，会考虑由单词断裂引入的软换行机会。

break-word

与 anywhere 值相同，允许原本不可中断的单词在行中没有其他可接受的断点时在任意点断开，但计算最小内容固有尺寸时，不考虑由单词断裂引入的软换行机会。

word-break

word-break CSS 属性用于设置当文本溢出其内容框时，是否以及如何在单词之间插入换行符。

normal

使用默认的断行规则。

break-all

为了防止溢出，应在任意两个字符之间插入断词（不包括中文/日文/韩文文本）。

keep-all

不应为中文/日文/韩文（CJK）文本使用断词。非 CJK 文本的行为与 normal 相同。

auto-phrase

与 word-break: normal 具有相同的效果，不同之处在于会执行语言特定分析以改进断词，避免在自然短语中间断词。

break-word

与 overflow-wrap: anywhere 结合 word-break: normal 具有相同的效果，无论 overflow-wrap 属性的实际值如何。

text-wrap

text-wrap CSS 简写属性控制元素内文本的换行方式。此属性是属性 text-wrap-mode 和 text-wrap-style 的简写。不同的值提供：

  • 排版改进，例如断裂标题之间更平衡的行长
  • 一种完全关闭文本换行的方法。

wrap

文本在适当的字符处（例如，在像英语这种使用空格分隔符的语言中是空格）换行，以最大限度地减少溢出。这是默认值。

nowrap

文本不跨行换行。它会溢出其包含元素，而不是断到新行。

balance

文本以最佳方式平衡每行字符数的方式换行，从而提高布局质量和可读性。由于计算字符并在多行中平衡它们计算成本高昂，因此此值仅支持跨越有限行数（Chromium 为六行或更少，Firefox 为十行或更少）的文本块。

pretty

结果与 wrap 相同，不同之处在于浏览器将使用较慢的算法，该算法倾向于更好的布局而不是速度。这适用于正文文本，其中良好的排版优于性能（例如，当应将孤行数保持在最低限度时）。

stable

结果与 wrap 相同，不同之处在于当用户编辑内容时，他们正在编辑的行之前的行保持静态，而不是整个文本块重新换行。

hyphens

hyphens CSS 属性指定当文本跨多行换行时，单词应如何进行连字符处理。它可以完全阻止连字符，在文本中手动指定位置进行连字符，或者让浏览器在适当的位置自动插入连字符。
连字符规则是语言特定的。在 HTML 中，语言由 lang 属性确定，只有当此属性存在并且有适当的连字符词典可用时，浏览器才会进行连字符处理。在 XML 中，必须使用 xml:lang 属性。
如果支持，hyphenate-character 可用于指定在断行末尾使用的替代连字符。
有两种 Unicode 字符用于手动指定文本中潜在的换行点:

  • U+2010（连字符）
    “硬”连字符表示一个可见的换行机会。即使该行实际上没有在该点断开，连字符仍然会渲染。

  • U+00AD (SHY)
    一个不可见的“软”连字符。此字符不会可见地渲染；相反，它标记了一个位置，如果需要连字符，浏览器应该在该位置断开单词。在 HTML 中，使用 &shy; 插入软连字符。

none

单词不会在换行符处断开，即使单词内的字符建议换行点。行只会在空格处换行。

manual

默认值。单词仅在单词内字符建议换行机会的地方进行断行。

auto

浏览器可以自由地在适当的连字符点自动断开单词，遵循它选择的任何规则。但是，当存在建议的换行机会时，它将覆盖自动断点选择。