-
2The key word you need to search for is "ellipsis"– DJClayworthApr 15, 2016 at 16:46
-
1mobify.com/blog/multiline-ellipsis-in-pure-css– j08691Apr 15, 2016 at 16:49
-
Check this link for Cross-browser multiline ellipse. codepen.io/natonischuk/pen/QbGWBa– Himanshu ShekharMar 25, 2019 at 6:00
Add a comment
|
1 Answer
Add all these. To make in single line.
{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width:100px; /* some width */
}
To do in multi line which actually you asked.
#content {
overflow: hidden;
width:100px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
working fiddle: https://jsfiddle.net/mishrarajesh/676jc7sa/
Please note that this multiline code is supported only in web-kit browsers for now.
-
4
-
1
-
@rajesh Is this css can be used in email format so i can make email responsive like your demo? Nov 2, 2018 at 7:16
-
4
-
3This multiline version works only for webkit. At least answer should mention it.– GhermanFeb 26, 2019 at 15:39