如何查找innerHtml(文本)超出容器元素宽度

时间:2016-06-09 08:41:49

标签: javascript jquery html5 css3

我需要测量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中滚动内容(使用选取框),否则我想按原样显示内容。

我不想根据文本的字符长度来计算,因为我们在多个设备中使用它。

3 个答案:

答案 0 :(得分:2)

您可以使用

element.scrollWidth > element.clientWidth

&#13;
&#13;
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;
&#13;
&#13;

答案 1 :(得分:1)

if($('#breaking span div').width() > $('#breaking').width())
{
   alert("exceded");
}else{
   alert("no exceded")
}

答案 2 :(得分:0)

您可以为包含内容的div设置高度。然后您可以提供overflow:auto

CSS

#content{
  height:50px;
  overflow:auto;
}

FIDDLE - &gt;