javascript - e.offsetWidth 返回错误值

Question

在我的应用程序中，我想检查是否有文本溢出(省略号)。为此，我检查 e.offsetWidth < e.scrollWidth但它们返回相等的值，表示 offsetWidth返回错误 值。这是我的实现:

CSS:

.less{
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.complete{
  word-wrap: break-word;
}

.collapse{
  color:blue;
  font-size:13px;
  cursor:pointer;
}

.hideElement{
 display: none;
}

#seemore:after{
  content: " \000BB";
}
#seeless:before{
   content:"\000AB\ ";
}

#description {
  width: 100%;
  overflow: hidden;
}

HTML:

<div id = "description">
    <div id="lessdescription" class="less"></div>
    <div id="seemore" class="collapse"></div>
    <div id="seeless" class="collapse hideElement"></div>
</div>

JS

function manageReportDescription() {
    var descriptionElement = document.getElementById("lessdescription");

    return descriptionElement.offsetWidth < descriptionElement.scrollWidth;
}   

I want to use pure JS properties (without relying on jQuery)

Answer 1

您的 Javascript 代码没问题，问题是因为您的 div 中没有文本，所以 offsetWidth 等于屏幕宽度和 scrollWidth也等于屏幕宽度，所以比较将返回 false 因为比较的两个元素具有相同的值 screen width ，尝试在你的 lessdescription< 中添加一些文本 分区