如果单行，则在 div 中居中文本，否则显示省略号答案

【问题标题】：Center text in div if single line else display ellipsis如果单行，则在 div 中居中文本，否则显示省略号
【发布时间】：2016-05-11 13:25:37
【问题描述】：

我需要在一个 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中间单行文字

功能齐头并进。

【问题讨论】：

@GauravAggarwal 链接的 duplicate 没有解决 OP 的居中条件
@GauravAggarwal 当您将两个问题、省略号和居中单行文本结合起来时，问题就开始了，所以我问了这个问题，并且在发布新问题之前我已经看到了这两个问题。
@GauravAggarwa 请检查更新部分

标签： html css

【解决方案1】：

您可以将mainDiv 分别用display: table-cell 和display: table 包装在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>

【讨论】：