在来自 flex 容器的文本上设置省略号 [英] Setting ellipsis on text from a flex container

问题描述

有什么方法可以使以下 HTML 行为:

Is there any way to get the following HTML behave so that:

1. 文本垂直居中
2. 文本为单行，并用 ...(省略号)截断

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

I can get either 1 or 2, but not both.

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

Please note, HTML cannot be modified, it's generated by a third-party library. We only have ability to change 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>

推荐答案

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

The ellipsis need to be set on the text element, not on the container:

.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>

更多选项:将省略号应用于多行文本

这篇关于在来自 flex 容器的文本上设置省略号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！