CSS: Jak ograniczyć ilość wyświetlanych linijek tekstu?

Załóżmy, że mamy element, którego rozmiary są z góry ustalone. W tym elemencie wyświetlany jest tekst. Problem jest wtedy, gdy do elementu zostanie wprowadzony wystarczającą długi tekst, który nie będzie się mieścić w obrębie tego elementu.

Przykład, który tutaj opisuję działa na zasadzie: "Wyświetl mi N linijek tekstu jeśli cały się nie zmieści". Przykład przycinania tekstu znajdziesz pod tym linkiem.

Przejdźmy do kodu:

HTML:

<div class="box">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod sollicitudin tortor, et convallis sapien porttitor pellentesque. Maecenas non leo sed sapien sollicitudin pharetra sed dignissim magna. Duis sed cursus turpis. Maecenas non faucibus nibh, non accumsan lacus. Maecenas varius eget nisi et accumsan. Praesent augue urna, aliquet eu convallis vel, imperdiet sit amet elit. Cras finibus nisi imperdiet, tempor orci vel, ullamcorper eros.
    </p>
</div>

CSS:

.box {
    width: 200px;
    margin: 0 auto;
    border: 1px solid black;
    padding: 1em;
}

.box p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

Mamy element o stałej szerokości. Jak widać tak długi tekst, na pewno się nie zmieści. Dlatego za pomocą reguły line-clamp ustalam, że maksymalnie niech zostaną wyświetlone 4 linijki tekstu.