CSS显示表不尊重固定高度

Question

我有这个必要的 CSS 布局，不能更改，所以它保持中间居中。

Div display:table（高度定义）在 display:table-cell 内有一个 div，两个 vertical-align:middle;（我用它来垂直居中内容）。问题是当内容溢出定义的高度时，它只是溢出表格，使其变大。

我需要设置类似overflow:hidden 之类的东西，这似乎不适用于表格...我只需要隐藏溢出的内容或者更好，将滚动条添加到表格中。有什么办法吗？

CSS

html,body {
  height: 100%;
}
.table {
  float:left;
  margin: 10px;
  display:table;
  height:500px;
  vertical-align:middle;
  background:#ccc;
}
.table-cell {
  vertical-align:middle;
  display:table-cell;
}

HTML

<div class="table">
  <div class="table-cell">
    some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>
  </div>
</div>
<div class="table">
  <div class="table-cell">
    some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>
  </div>
</div>

Codepen：http://codepen.io/anon/pen/lytea

Answer 1

最简单的方法是使用最大高度为 100% 的内联块级元素包装您的内容， 并且，您需要在 table-cell 元素上设置 height: inherit。

html,body {
  height: 100%;
}
.table {
  float:left;
  margin: 10px;
  display:table;
  height:500px;
  vertical-align:middle;
  background:#ccc;
}
.table-cell {
  height: inherit;
  vertical-align:middle;
  display:table-cell;
}
.wrapper {
  border: 1px dotted blue;
  display: inline-block;
  max-height: 100%;
  overflow: auto;
}

<div class="table">
  <div class="table-cell">
    <div class="wrapper">
    some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>
</div>
    </div>
</div>
<div class="table">
  <div class="table-cell">
    <div class="wrapper">
    some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>
      </div>
  </div>
</div>

Answer 2

你需要像这样在.table-cell 中使用text-overflow: ellipsis;

white-space: nowrap;
overflow: auto;
text-overflow: ellipsis;

请试试上面的css

附：要获得text-overflow: ellipsis;，它需要white-space 和overflow 属性。

overflow 可以是auto 或scroll 或hidden。