文本溢出：省略號不起作用顯示行有限

Question

的jsfiddle代碼： https://jsfiddle.net/JaneChen/gu7tf864/1/

<span class="fileName" >long name file to display long name file to displayddddddssdd moreggggg lines more lines more more more lines</span> 

.scss：

.fileName { 
    @font-size: 17px; 
    @line-height: 1.3; 
    @lines-to-show: 3; 

    -webkit-font-smoothing: antialiased; 
    -webkit-line-clamp: 3; 
    display: inline-block; 


    overflow:hidden; 
    display: -webkit-box; 


    text-overflow: ellipsis; 
    width: 175px; 


    font-size: 17px; 
    line-height: 1.4; 
    max-height: 71.4px; 
} 

文本塊顯示爲3行，但沒有按省略號當文本被截斷時不顯示。這是爲什麼 ？有沒有辦法解決？謝謝！

Answer 1

您忘記

-webkit-box-orient: vertical; 

Answer 2

你忘了

white-space: nowrap; 

檢查結果 https://jsfiddle.net/gu7tf864/3/