对于一些文本内容超过包裹层,我们经常会采用省略号的形式取隐藏溢出部分,而这通常只需要通过css就可以解决
#single-line {
width: 100px;
border: 1px solid #333;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
#multi-line {
width: 100px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
}
<div id="single-line">1234567876543213456784323456</div>
<div id="multi-line">123456787654321345678432345612345678765432134567843234561234567876543213456784323456123456787654321345678432345612345678765432134567843234561234567876543213456784323456</div>
那么有需求需要知道当前文本内容是否有溢出,需要如何判断?
单行:如果溢出就只能向右超出,所以我们需要判断文本的长度是否大于包裹层(可视层)的宽度
var single = document.getElementById("single-line")
// 如果文本内容的整体宽度大于其可视宽度,那么就说明溢出了
if (single.scrollWidth > single.clientWidth) {
// do something
}
多行:如果溢出就是向下溢出,所以需要判断的是高度
var multi = document.getElementById("multi-line")
// 如果文本内容的整体高度大于其可视高度,那么就说明溢出了
if (multi.scrollHeight > multi.clientHeight) {
// do something
}