鉴于隔年差载地会用到 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,故对比其对应的 scrollHeightclientHeight 属性。

看效果 👀:

应用场景

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

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

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

其他

  • 💡 给非 overflow: visiblediv 元素设置 resize: horizontal 就可以允许拖拽改变容器的大小了。(文中 demo 就用到了此技巧)
  • 💡 使用 ResizeObserver 接口,可以监听元素的内容区域的边界框改变。
最后更新于:
2021.05.02