Jane Jane - 1 year ago 107
CSS Question

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

jsfiddle code :

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


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

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

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 Source

you forgot

-webkit-box-orient: vertical;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download