<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"));
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.