從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