Question

垂直居中文字的典型解决方案是：

p {
    width: 10em;
    height: 2.4em;
    display: table-cell;
    vertical-align: middle;
}

效果是：

 _________________
|                 |
|                 |
| Line 1 of text  |
|                 |
|_________________|

 _________________
|                 |
| Line 1 of text  |
| Line 2 of text  |
| Line 3 of text  |
|_________________|

当我尝试隐藏太长而无法装入框中的文字时，此解决方案对我不起作用：

p {
    ...
    ...
    overflow: hidden;
}

由于表格单元格的某些原因，忽略溢出规则。

 _________________
| Line 1 of text  |
| Line 2 of text  |
| Line 3 of text  |
| Line 4 of text  |
| Line 5 of text  |
 -----------------
  Line 6 of text
  Line 7 of text

许多其他规则也停止运作，包括保证金。有没有其他方法可以在不破坏许多其他关键CSS规则的情况下垂直居中任意数量的文本行？

Answer 1

如今，有一个很好的解决方案可以使用flexbox解决此问题。我已经准备了一个代码片段：

div {
    width: 10em;
    height: 2.4em;
  
    display: flex;
    align-items: center;
    overflow: hidden;
  
    background: blue;
    color: white;
}

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>
      asjdg<br>
    </div>

    <br>

    <div>
      asjdg<br>
      asdsad<br>
      asdh<br>
      asdhsjkadh<br>
      asgdh<br>
      asdasd<br>
      asdasd<br>
    </div>
  </body>
</html>

如何垂直居中文本并隐藏溢出文本？

1 个答案: