CSS 超出文本显示省略号与检测截断方法

鉴于隔年差载地会用到 CSS 实现超出文本显示省略号的情况，且方便快速查询，故记此文。

CSS 实现超出一行文本显示省略号

.single-line-text {
  width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

CSS 实现超出多行文本显示省略号

.multiple-line-text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

至此，又多了一个快速寻找代码片段的文章。👍

---

同时，遇到了一个需求：一段文本为文件名，当触发超出文本时，显示后缀在最后。即：

[我是一个名字很长的....pdf] 如何实现呢？

首先，我们需要来看一下，如何检测是否超出了呢？ 我曾试图用 CSS 来检测，但无计可施。于是利用 JS 实现了这一点：

JavaScript 检测一行文本是否被截断

const isTruncated = el => {
  return el.scrollWidth > el.clientWidth
}

因为我们设置了不允许换行，即 white-space: nowrap，故当触发 overflow 时，元素的 scrollWidth 将大于其 clientWidth。

如果此处不太理解，将 hidden 改为 auto 就更加清晰了。

看效果 👀：

JavaScript 检测多行文本是否被截断

const isTruncated = el => {
  return el.scrollHeight > el.clientHeight;
}

和单行文本类似，由于多行文本的 overflow 检测方向为 vertical，故对比其对应的 scrollHeight 和 clientHeight 属性。

看效果 👀：

应用场景

回到我们的需求（[我是一个名字很长的....pdf]），一行文本被截断后，显示后缀名，借助 JS 就可以实现了。

但是，多行的呢？多行还是不能简单通过检测是否截断来拼接展示，原因是，我们无法创建一个不规则的容器的同时使用line-clamp设定。如果想实现，则需要使用 JS 动态计算，例如从末尾逐个删除字符，直到其符合为止。虽然可以使用不同的算法来优化这个过程，有一个库就是利用计算来解决这个事情：Clamp.js

当页面如果使用交多的的计算时，为了避免性能问题，我们大多时候，可以采取其他手段达到同样的效果，例如，通过图标、Tooltip、类型辅助信息等方式。

其他

• 💡 给非 overflow: visible 的 div 元素设置 resize: horizontal 就可以允许拖拽改变容器的大小了。（文中 demo 就用到了此技巧）
• 💡 使用 ResizeObserver 接口，可以监听元素的内容区域的边界框改变。