logo标签列表

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

javascriptjqueryhtmlcss
3

我需要测量一个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>

我希望可以在brContent div中滚动内容(使用marquee)，如果内容超出div，则滚动，否则按原样显示。
我不想根据文本字符长度进行计算，因为我们会在多个设备上使用此功能。
你的HTML代码有误；你不能在行内元素（span）中嵌套块级元素（div）。此外，在这里使用label是错误的 - 我猜你需要使用标题标签（h1- h6）。 - Shaggy
3个回答
2

您可以使用

element.scrollWidth > element.clientWidth


var el = document.getElementById('breaking').querySelector('span');
(window.onresize = function log() {
  console.log("scrollWidth =", el.scrollWidth, ", clientWidth =", el.clientWidth);
})();
#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;
}
<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>

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

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

CSS

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

{{链接1：FIDDLE}} -->

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接