在 flex 容器中的文本上设置省略号答案

【问题标题】：Setting ellipsis on text from a flex container在 flex 容器中的文本上设置省略号
【发布时间】：2017-12-30 15:38:03
【问题描述】：

有没有办法让以下 HTML 行为：

文本垂直居中对齐
文本为单行，并用 ...（省略号）截断

我可以得到 1 或 2，但不能同时得到。

请注意，HTML 不能修改，它是由第三方库生成的。我们只有改变css的能力。

.target {

  width: 300px;
  height: 50px;
  border: solid 1px red;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: flex; /*change to block for ellipsis*/
  align-items: center;
  
}

<label class="target">
  Text here is very very long that it might get truncate if this box get resized too small
</label>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

省略号需要设置在文本元素上，而不是容器上：

.target {
  display: flex;
  align-items: center;
  width: 300px;
  height: 50px;
  border: solid 1px red;
  white-space: nowrap;
}

span {
  overflow: hidden;
  text-overflow: ellipsis;
}

<label class="target">
  <span>Text here is very very long that it might get truncate if this box get resized too small</span>
</label>

【讨论】：