从Flex容器

Question

设置文本省略号有没有什么办法让下面的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; 
 
    
 
}

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

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

更多选择：Applying an ellipsis to multiline text