在我的应用程序中,我想检查是否有文本溢出(省略号)。为此,我检查 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)
最佳答案
您的 Javascript 代码没问题,问题是因为您的 div
中没有文本,所以 offsetWidth
等于屏幕宽度和 scrollWidth
也等于屏幕宽度,所以比较将返回 false
因为比较的两个元素具有相同的值 screen width ,尝试在你的 lessdescription< 中添加一些文本
分区
关于javascript - e.offsetWidth 返回错误值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39250073/