小编fle*_*com的帖子

在 Flex 容器中的文本上设置省略号

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

  1. 文本垂直居中对齐
  2. 文本是单行,并用 ... 截断(省略号)

我可以得到 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;
  
}
Run Code Online (Sandbox Code Playgroud)
<label class="target">
  Text here is very very long that it might get truncate if this box get resized too small
</label>
Run Code Online (Sandbox Code Playgroud)

html css flexbox

4
推荐指数
1
解决办法
1734
查看次数

标签 统计

css ×1

flexbox ×1

html ×1