An absolutely-positioned ellipsis displays when a multi-line box overflows.
/*
<div class="ellipsis"><div class="ellipsis-content">
Content goes here.
</div><div class="ellipsis-clear"></div></div>
*/
.ellipsis {
display: block;
line-height: 1.25;
max-height: 2.5em; /* line-height * number of lines */
overflow: hidden;
position: relative;
white-space: normal;
word-wrap: break-word;
background-color: #FFF;
}
.ellipsis-content {
display:block;
background-color:inherit;
}
.ellipsis-content::before {
content: "…";
position: absolute;
top: 1.25em; /* line-height * (number of lines - 1) */
right: 0;
background-color: inherit;
padding-left: 0.25em;
}
.ellipsis-content::after {
content: "";
position: absolute;
height: 100%;
width: 100%;
background-color: inherit;
}
.ellipsis-clear {
display:block;
position:relative;
height: 100%;
background-color: inherit;
}