鉴于隔年差载地会用到 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
接口,可以监听元素的内容区域的边界框改变。
最后更新于:
2021.05.02