Question

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

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

Answer 1

您可以使用

element.scrollWidth > element.clientWidth

＆＃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;

Answer 2

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

Answer 3

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

CSS

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

FIDDLE - ＆gt;

如何查找innerHtml（文本）超出容器元素宽度

3 个答案: