Question

我试图检测容器中是否存在溢出和隐藏的任何跨距。

<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; 
}

我能想到的唯一方法是选择最后一个span元素，并确定它是否在容器中。

my jsfiddle

Answer 1

＆＃13;

// 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");
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

我尝试了以下JS小提琴。它给了我正确的答案。为简单起见，我为每个元素添加了一个ID。

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");
}

Answer 2

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

检查div是否包含任何溢出的内联块跨度

2 个答案: