Clever Geek Handbook

Check if div contains any overflowing line boxes

I am trying to determine if there are any gaps in the container that are overflowing and hidden.

<div class="container">
    <span>one</span><span>two</span><span>three</span><span>four</span><span>five</span><span>six</span><span>seven</span><span>eight</span>
</div>

...

.container {
    width: 150px;
    white-space: nowrap;
    overflow: hidden;
}
span {
    display: inline-block;
    margin-right: 6px; 
}

The only way I could do this would be to select the last span element and determine if it is inside the container.

my jsfiddle

+3


source to share


2 answers 


// container 1 should be 'yes'
var cont = document.getElementById("container");
if (cont.scrollWidth > cont.offsetWidth) {
  alert("yes");
} else {
  alert("no");
}
// container 2 should be 'no'
var cont1 = document.getElementById("container1");
if (cont1.scrollWidth > cont1.offsetWidth) {
  alert("yes");
} else {
  alert("no");
}
      

        
        
        
      

    
.container,
.container2 {
  margin: 25px;
  background: lightgrey;
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
}
span {
  display: inline-block;
  margin-right: 6px;
}
      

        
        
        
      

    
<div class="container" id="container">
  <span>one</span><span>two</span><span>three</span><span>four</span><span>five</span><span>six</span><span>seven</span><span>eight</span>
</div>

<div class="container2" id="container1">
  <span>one</span><span>two</span><span>three</span>
</div>
Run codeHide result


I tried the following JS script. This gives me the correct answer. I've added an id for each item for simplicity.



http://jsfiddle.net/caqL13pq/1/

// container 1 should be 'yes'
var cont=document.getElementById("container");
if(cont.scrollWidth>cont.offsetWidth){
    alert("yes");
}else{
    alert("no");
}
// container 2 should be 'no'
var cont1=document.getElementById("container1");
if(cont1.scrollWidth>cont1.offsetWidth){
    alert("yes");
}else{
    alert("no");
}
+3


source 


if($(".container").get(0).scrollWidth > $(".container").outerWidth())
{
    alert("Yes");
}
else
{
    alert("No");
}

if($(".container2").get(0).scrollWidth > $(".container2").outerWidth())
{
    alert("Yes");
}
else
{
    alert("No");
}


JS Fiddle

0


source






More articles:


All Articles