Usually, a block of text in an HTML page may have the ellipsis (…) at its end to indicate that it has been cut-off. But, this works for the first line only of the text.
Suppose that you have a <div> with a height that might show multiple lines of text, and you want to add the ellipsis at the last line. This is tricky but possible. I found a lot of solutions on the net, but this one is my preferred as it is pure CSS. Juste give the following CSS class “block-with-text” to the <div> or <p> you want.
/* styles for ‘…’ */
.block-with-text {
/* hide text if it more than N lines */
overflow: hidden;
/* for set ‘…’ in absolute position */
position: relative;
/* use this value to count block height */
line-height: 1.2em;
/* max-height = line-height (1.2) * lines max number (3) */
max-height: 3.6em;
/* fix problem when last visible word doesn’t adjoin right side */
text-align: justify;
margin-right: -1em;
padding-right: 1em;
}
.block-with-text:before {
/* points in the end */
content: ‘…’;
/* absolute position */
position: absolute;
/* set position to right bottom corner of block */
right: 0;
bottom: 0;
}
.block-with-text:after {
/* points in the end */
content: ”;
/* absolute position */
position: absolute;
/* set position to right bottom corner of text */
right: 0;
width: 1em;
/* set width and height */
height: 1em;
margin-top: 0.2em;
background: white;
}