我需要测量div内的文本宽度是否超过div宽度。
JSFiddle链接:https://jsfiddle.net/92800cst/
HTML:
<html>
<body>
<div id="breaking" >
<label class="brNews">1318 Test - iPhone Start Page</label>
<span>
<div id="brContent">Test Content Title Which Exceeds the outer element width to scroll</div>
</span>
</div>
</body>
</html>
如果内容超过div,我想在brContent div中滚动内容(使用选取框),否则我想按原样显示内容。
我不想根据文本的字符长度来计算,因为我们在多个设备中使用它。
答案 0 :(得分:2)
您可以使用
element.scrollWidth > element.clientWidth
var el = document.getElementById('breaking').querySelector('span');
(window.onresize = function log() {
console.log("scrollWidth =", el.scrollWidth, ", clientWidth =", el.clientWidth);
})();
&#13;
#breaking {
position: relative;
background: #802018;
box-sizing: border-box;
overflow: hidden;
}
#breaking span {
float: left;
padding-left: 70px;
width: 100%;
line-height: 46px;
overflow: hidden;
box-sizing: border-box;
white-space: nowrap;
}
#breaking label {
position: absolute;
padding: 6px;
width: 70px;
height: 100%;
overflow: hidden;
border-right: 1px solid #a8635a;
background-color: inherit;
box-sizing: border-box;
}
&#13;
<div id="breaking">
<label class="brNews">1318 Test - iPhone Start Page</label>
<span>Test Content Title Which Exceeds the outer element width to scroll</span>
</div>
&#13;
答案 1 :(得分:1)
if($('#breaking span div').width() > $('#breaking').width())
{
alert("exceded");
}else{
alert("no exceded")
}
答案 2 :(得分:0)