Usually, a block\u00a0of 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.<\/p>\n
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\u00a0as it is pure CSS. Juste give the following CSS class “block-with-text” to the <div> or <p> you want.<\/p>\n
\/* styles for ‘…’ *\/ .block-with-text:before<\/em> { .block-with-text:after<\/em> { Usually, a block\u00a0of 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 … <\/p>\n
\n.block-with-text<\/em> {
\n\/* hide text if it more than N lines *\/
\noverflow: hidden;
\n\/* for set ‘…’ in absolute position *\/
\nposition: relative;
\n\/* use this value to count block height *\/
\nline-height: 1.2em;
\n\/* max-height = line-height (1.2) * lines max number (3) *\/
\nmax-height: 3.6em;
\n\/* fix problem when last visible word doesn’t adjoin right side *\/
\ntext-align: justify;
\nmargin-right: -1em;
\npadding-right: 1em;
\n}<\/p>\n
\n\/* points in the end *\/
\ncontent: ‘…’;
\n\/* absolute position *\/
\nposition: absolute;
\n\/* set position to right bottom corner of block *\/
\nright: 0;
\nbottom: 0;
\n}<\/p>\n
\n\/* points in the end *\/
\ncontent: ”;
\n\/* absolute position *\/
\nposition: absolute;
\n\/* set position to right bottom corner of text *\/
\nright: 0;
\nwidth: 1em;
\n\/* set width and height *\/
\nheight: 1em;
\nmargin-top: 0.2em;
\nbackground: white;
\n}<\/p>\n","protected":false},"excerpt":{"rendered":"