CSS Multi Line ellipsis Cross Browser

Question

There is a \"div\" in my webpage that has fixed width and height.

Following css only works with single line text:

overflow: hidden;
text-overflow: ellips         


        

Answer 1

You could solve it using some after pseudo classes. As text-overflow: ellipsis doesn't render the same cross browser we are adding ellipsis using the content attribute that you can provide to the :after class. When we are setting white-space: nowrap to the p we need to add the div:after "hack" to ensure that the text is clipped where the padding sets in.

HTML:

    
This is a text that clips to ellipsis because it is long
    
This is a text that clips to ellipsis because it is long

CSS

div {
width: 200px;
padding: 20px;
border: 1px solid #ccc;
overflow: hidden;
position: relative;
}

//Solves the overflow issue of the white-space: nowrap
div:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 20px;
background: #fff;
z-index: 1;
}

p {
white-space: nowrap;
display: inline-block;
}

p:after {
content: '...';
position: absolute;
right: 5px;
z-index: 2;
}

JSFiddle

Edit

I can see that I might have misread your question a bit. My code will fix Cross-browser ellipsis rendering but not for multi-line text. Check out this post for more answers on your specific topic: Limit text length to n lines using CSS: Stack Overflow