CSS如何让文本超出显示省略号_利用::after伪元素控制截断效果-css教程-PHP中文网

text-overflow: ellipsis仅支持单行省略；多行需用-webkit-line-clamp（需display:-webkit-box等配合）、::after伪元素遮罩或javascript精确截断，各有兼容性与精度权衡。

css如何让文本超出显示省略号_利用::after伪元素控制截断效果

text-overflow: ellipsis 只对单行生效，多行要用 JavaScript 或 -webkit-line-clamp

纯 CSS 实现多行文本省略号，text-overflow: ellipsis 本身不支持 —— 它只在单行、white-space: nowrap 和 overflow: hidden 同时满足时才起作用。想截两行或三行并加省略号，得换思路。

最轻量的方案是用 -webkit-line-clamp（Chrome/Safari/Edge 均支持，Firefox 从 129+ 开始支持）：

div {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 截 2 行 */
  overflow: hidden;
}

必须配合 display: -webkit-box 和 -webkit-box-orient: vertical，缺一不可
-webkit-line-clamp 是行数控制，不是字符数，响应式下可能因字号缩放导致实际截断位置偏移
Firefox 旧版本完全不识别，若需兼容，得 fallback 到 JS 截取字符串 + textContent 拼接

::after 伪元素加省略号，本质是“视觉覆盖”，不是真截断

用 ::after 在容器右下角盖一个省略号，看似灵活，实则绕开了文本布局逻辑 —— 它不改变原文本流，也不触发截断计算，只是“假装有省略”。容易误以为内容被裁剪了，其实 DOM 里全在。

典型写法：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

div {
  position: relative;
  max-height: 3.6em; /* 1.8em × 2 行 */
  overflow: hidden;
}
div::after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  background: white; /* 需遮住部分文字，常要同背景色 */
  padding-left: 4px;
}

max-height 必须精确匹配行高 × 行数，否则省略号会悬空或压字
若父容器字体大小动态变化（如 rem/vw），max-height 得同步响应，否则错位
::after 的 background 不是万能解：深色背景上得用透明渐变遮罩，否则边缘生硬

用 JavaScript 精确截断时，别直接切字数

按字符长度截取（比如 str.substring(0, 50) + "..."）在中英文混排、emoji、全角标点场景下极易崩 —— “50 个字符”可能只显示半句话，甚至把 emoji 切成乱码。

优先用 element.scrollHeight > element.clientHeight 判断是否溢出，再逐字/逐词回退测试
推荐用 getClientRects() 获取每行渲染范围，定位最后一行末尾位置，再反推可容纳多少文本节点
避免在 resize 回调里高频重算；加节流，或监听 ResizeObserver
服务端预截断（如 API 返回 summary 字段）比前端 JS 更稳，尤其列表页大量卡片时

line-height 和 font-size 不一致时，-webkit-line-clamp 渲染会偏移

-webkit-line-clamp 的行高计算依赖 line-height，但若元素内嵌了不同 font-size 或 vertical-align 的子标签（比如 <sup></sup> 或图标 <span></span>），浏览器可能把整行高度算高，导致提前截断或留白过多。