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％的内联块级元素包装内容，并且，您需要在height: inherit元素上设置table-cell。

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

您需要在text-overflow: ellipsis;中使用.table-cell

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

请尝试以上css

P.S。要获得text-overflow: ellipsis;，需要white-space和overflow属性。

overflow可以是auto或scroll或hidden。

CSS显示表不受固定高度的影响

2 个答案: