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

Question

我尝试了很多次，在很多情况下都非常有用，但似乎不可能：

1. 将 2 个 div 放入同一个 div 容器中，总之 2 列，div 容器宽度保持固定。
2. 每个 div 看起来像 inline-block，所以它会根据内部内容调整，所以如果内部内容没有，宽度为零，如果内部是 100px，宽度将是 100px。这是正常的内联块。
3. 2 个 div 必须始终在同一行，没有断线。
4. 如果一个或两个 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

类似的事情可以通过 inline-block 完成，但两种方式都有相同的问题：内部内容溢出的 div 宽度不保持在容器宽度内而是保持完整内容宽度

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

谢谢

Answer 1

这里有两件事要做：

1. 将table-layout 设置为fixed：

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

2. 将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。