文本溢出：省略号不起作用显示行有限

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/