Question

我有一个有文字的盒子。文本是动态添加的。它可以是一个单词，一个句子，也可以分成多行。

在框中，我只会显示最多2行。

框中的文字需要垂直和水平居中。这就是我遇到问题的地方。

到目前为止，文本是水平居中但不是垂直居中。我尝试使用display: flex修复了单行文本的问题，但是当有两行时没有给我想要的结果。我需要它来显示前两行。

以下是我目前的代码：

.item {
  width: 245px;
  margin-left: 10px;
  margin-right: 10px;
  border: 1px solid grey;
  height: 40px;
  line-height: 20px;
  overflow: hidden;
  margin-top: 20px;
  text-align: center;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="item">
  Some Text
</div>

<div class="item">
  Some Text Some Text Some Text Some Text Some Text Some Text Some TextSome Text Some Text Some Text Some Text Some Text Some Some Text Some Text Some Text Some Text Some Text Some Text Some Text
</div>

<div class="item flex">
  Some Text Some Text Some Text Some Text Some Text Some Text Some TextSome Text Some Text Some Text Some Text Some Text Some Some Text Some Text Some Text Some Text Some Text Some Text Some Text
</div>

如果我有办法根据一条线是否分成两个来设置样式，我可以简单地设置两个不同的线高。一个40px，另一个20px。

如何使文本垂直和水平居中而不会摆弄我在2行剪切文本所需的行高？

Answer 1

尝试使用 TABLE CELL 属性进行垂直对齐。

<div class="table">
 <div class="item cell">
    Some Text
 </div>
</div>

CSS

.table{
    display:table;
}
.table .cell{
    display:table-cell;
    vertical-align:middle;  
}

Answer 2

尝试使用填充，

.item {
  width: 245px;
  margin-left: 10px;
  margin-right: 10px;
  border: 1px solid grey;
  height: 40px;
  line-height: 20px;
  overflow: hidden;
  margin-top: 20px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top:10px;
  padding-bottom:10px;
}

文本分为2行

2 个答案: