<div class="multiple-line-text">
我是一个名字很长很长很长很长长很长很长长很长很长的.pdf
</div>
<div>
是否被截断:
<span class="multiple-line-text-result"></span>
</div>
body {
padding: 20px;
}
.multiple-line-text {
resize: horizontal;
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
border: 1px solid #000;
padding: 2px;
margin: 20px 0;
}
const isTruncated = el => {
return el.scrollHeight > el.clientHeight;
};
const element = document.querySelector(".multiple-line-text");
const detect = () => {
const result = isTruncated(element);
document.querySelector(".multiple-line-text-result").innerHTML = `${result}`;
};
detect();
const ro = new ResizeObserver(entries => {
detect();
});
ro.observe(document.querySelector(".multiple-line-text"));
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.