With CSS, use “…” for overflowed block of multi-lines

Question

with

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

\"...\" will be shown in the end of the line if overflowed. However, t

Answer 1

javascript solution will be better

• get the lines number of text
• toggle is-ellipsis class if the window resize or elment change

getRowRects

Element.getClientRects() works like this

each rects in the same row has the same top value, so find out the rects with different top value, like this

function getRowRects(element) {
    var rects = [],
        clientRects = element.getClientRects(),
        len = clientRects.length,
        clientRect, top, rectsLen, rect, i;

    for(i=0; i clientRect.right ? rect.right : clientRect.right;
            rect.width = rect.right - rect.left;
        }
        else {
            rects.push({
                top: clientRect.top,
                right: clientRect.right,
                bottom: clientRect.bottom,
                left: clientRect.left,
                width: clientRect.width,
                height: clientRect.height
            });
        }
    }
    return rects;
}

float ...more

like this

detect window resize or element changed

like this