Geek Answers Handbook

How to find innerHtml (text) exceeds width of container element

I need to determine if the width of the text inside the div will exceed the width of the div.

JSFiddle link: 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>

I want to scroll the content (using the selection) inside the brContent div if the content exceeds the div, otherwise I want to display the content as is.

I do not want to calculate based on the length of the characters of the text, since we use it on multiple devices.

+4
source share
3 answers

you can use

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>
Run codeHide result
+2
source 
if($('#breaking span div').width() > $('#breaking').width())
{
   alert("exceded");
}else{
   alert("no exceded")
}
+1
source

div . overflow:auto

CSS

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

FIDDLE →

0

More articles:


All Articles