Question

我多次尝试这样做，在许多情况下非常有用，但似乎不可能：

将2个div放入相同的div容器中，简称2列，div容器宽度保持固定。
每个div都显示为内联块，因此它根据内部内容进行调整，因此如果内部内容为空，则宽度为零，如果内部为100px，则宽度为100px。这是正常的内联块。
2个div必须在同一行中保持始终，没有断行。
如果一个或两个div的内容溢出，它将被隐藏，div 始终保持在容器的宽度。

我能够做到1-2-3，但我在4点停下来。

这是代码：

<div class="container">
       <div class="column">Lorem ipsum dolor sit amet</div>                           
       <div class="column">Lorem ipsum dolor sit amet</div>                       
</div>

CSS

.container{
  display: table;
  overflow: hidden;
}
.column {
  display: table-cell;
}

Demo

类似的东西可以通过内联块来完成，但是两种方式都有相同的问题：内部内容溢出的div的宽度不会留在容器宽度中但保持全内容宽度

难以解释，希望有人理解。这是我的项目的屏幕截图，我的问题是：http://expirebox.com/download/39f9acff53e75830b1714a653b11e0d0.html

谢谢

Answer 1

这里有两件事要做：

将table-layout设为fixed：

.container {
  width: 200px;
  display: table;
  table-layout: fixed;
  overflow: hidden;
}

在溢出的情况下将visibility设置为隐藏：

var element = document.querySelector('.column');
if( (element.offsetHeight < element.scrollHeight) || (element.offsetWidth < element.scrollWidth)){
  // your element have overflow
  element.style.visibility = "hidden";
}
else{
  //your element don't have overflow
}

摘自here，JS Bin。

内联块没有换行符，元素为最大宽度

1 个答案: