Jane Jane - 3 months ago 11
CSS Question

text-overflow:ellipsis doesn't work limited lines of display

jsfiddle code :
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;
}


The text block shows as 3 lines, but The ellipsis doesn't show when the text is truncated. Why is that ? Is there a way to fix? Thanks!

Answer

you forgot

-webkit-box-orient: vertical;
Comments