文本溢出省略怎么写？

单行：固定或有上限的宽度，white-space: nowrap，overflow: hidden，text-overflow: ellipsis。多行：用 -webkit-line-clamp，这是目前各浏览器都实现了的写法。

原理

.one-line {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.multi-line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

text-overflow 只对单行、且溢出被隐藏时生效。元素需要有可计算的宽度，浮动或 flex 子项有时还要 min-width: 0，否则它会跟着文字变宽，永远不溢出。

多行省略是按行盒裁切，英文长单词可能在行中间被截断。overflow-wrap: anywhere 可以让长串换行，但要接受单词被拆开。

完整内容不要只靠悬停标题。触控设备没有悬停。关键信息应能展开，或在别处提供全文。

追问

按高度裁切和按行数裁切？

行数用 line-clamp。高度用 max-height 加溢出隐藏，省略号不会自动出现在最后一行末尾。要精确的「最后一行末尾是省略号」，用行数方案。

flex 子项里省略失效？

子项的默认最小尺寸是内容宽度。给该项 min-width: 0 或 overflow: hidden，省略才会触发。

易错点

• 只写 text-overflow: ellipsis，没有 nowrap 和 hidden，省略号不出现。
• 多行方案忘了 display: -webkit-box，line-clamp 不生效。
• 把省略当成唯一呈现，读屏和选中文本的体验要单独看一眼。

相关

• Flex
• 隐藏元素