If you want to have multiple lines of text that end in an ellipsis, use the below code example:
<html>
<body>
<style>
p {
font-size : 26px;
font-family: serif;
}
/* Begin required CSS. */
.line-clamp {
display : block;
display : -webkit-box;
-webkit-box-orient : vertical;
position : relative;
line-height : 1.2;
overflow : hidden;
text-overflow : ellipsis;
padding : 0 !important;
}
.line-clamp:after {
content : '...';
text-align : right;
bottom : 0;
right : 0;
width : 25%;
display : block;
position : absolute;
height : 1.2em;
}
.line-clamp-1 {
-webkit-line-clamp : 1;
height : 1.2em;
}
.line-clamp-2
{
height : 2.4em;
}
.line-clamp-3
{
-webkit-line-clamp : 3;
height : 3.6em;
}
.line-clamp-4
{
-webkit-line-clamp : 4;
height : 4.8em;
}
.line-clamp-5
{
-webkit-line-clamp : 5;
height : 6em;
}
/* End required CSS. */
</style>
<p class="line-clamp line-clamp-4">This is a cross-browser solution that will clamp text to X number of lines with a trailing ellipsis in Webkit browsers. The `height` property is used on other browsers (along with a fading text effect) as a graceful fallback in non-Webkit browsers. The use of CSS `calc` allows for any font-size to work properly; i.e. you don't need a fixed height or a fixed font size for this to work! Play with it :-) You can change the second class to `line-clamp-[1|2|3|4|5]` and experiment with this just a little.</p>
</body>
</html>