html - 如果单行显示省略号，则在 div 中居中显示文本

Question

我需要在一个 div 中显示最多两行文本，如果文本超过两行，则在两行文本的末尾显示省略号。

+------------------------+
| Some text for test and |
| Some text for test ... |
+------------------------+

此外，如果文本只是单行，那么我需要在 div 中间显示单行，左对齐。 (下面的示例显示了三行和文本，但它应该是两行:))。

+------------------------+
|                        |  
| Some text for test and |
|                        |  
+------------------------+

目前我正在使用下面的代码:

.mainDiv {
  font-size: 10px;
  min-height: 10px;
  max-height: 20px;
  line-height: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}

<div class="mainDiv">
  some text for test
</div>

如果文本有两行或多于两行，使用上面的代码效果很好。但是，如果文本是单行的，那么它不会显示在 div 的中心，而是显示在顶部。

更新
问题是当我们将两者结合起来时:
1. 一个div中最多2行省略号
2.div中间单行文字

功能在一起。

Answer 1

您可以分别使用 display: table-cell 和 display: table 将 mainDiv 包裹在 2 个 div 中。然后，在单元格上 vertical-align: middle。

您只需将最外层的 div 设置为您想要的高度。

Fiddle

.mainDiv {
  font-size: 14px;
  min-height: 10px;
  max-height: 20px;
  line-height: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}

.container {
  display: table-cell;
  vertical-align: middle;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

.wrapper {
  display: table;
}

<div class="wrapper">
  <div class="container">
    <div class="mainDiv">
      text text text text text text text text text text text text text text text text text
    </div>
  </div>
</div>

<div class="wrapper">
  <div class="container">
    <div class="mainDiv">
      text text text
    </div>
  </div>
</div>