Zacisk liniowy - CSS-Tricks | Almanach CSS 2025

line-clampTekst obcięte własności w liczbie określonej linii.

Jego specyfikacja to obecnie wersja robocza redakcji, co oznacza, że nic tutaj nie jest ustalone, ponieważ jest w toku. To powiedziawszy, jest zdefiniowany jako skrót od max-linesi block-overflow, z których pierwszy jest określony jako zagrożony odrzuceniem w rekomendacji dla kandydata.

Łatwo jest zobaczyć, jak max-lineszostałoby nixed, ponieważ jego funkcja (ustawianie liczby wierszy przed obcięciem) jest już wbudowana line-clampi jakakolwiek dalsza abstrakcja może być niepotrzebna. Ale to sprawia, że zbaczamy z kursu, więc przejdźmy dalej.

Składnia

.module ( line-clamp: (none | ); )

line-clamp akceptuje następujące wartości w bieżącej wersji roboczej specyfikacji:

none: nie ustawia maksymalnej liczby wierszy iw rezultacie żadne obcięcie nie nastąpi.
: ustawia maksymalną liczbę wierszy przed obcięciem treści, a następnie wyświetla wielokropek (…) na końcu ostatniej linii.

Ten wielokropek powinien być renderowany jako znak Unicode (U + 2026), ale można go zastąpić jego odpowiednikiem w oparciu o język treści i tryb pisania używanego agenta użytkownika.

Hej, czy nie mogę tego zrobić z przepełnieniem tekstu?

Dobre pytanie, przyjacielu, a odpowiedź brzmi: cóż…

(Widzisz co zrobiłem?)

… Sorta.

text-overflowrzeczywiście ma ellipsiswartość, która obetnie tekst:

.truncate ( text-overflow: ellipsis; /* Needed to make it work */ overflow: hidden; white-space: nowrap; )

Zobacz przepełnienie tekstu pióra autorstwa Geoffa Grahama (@geoffgraham) w CodePen.

Fajnie fajnie, to dobry początek. Ale co, jeśli chcemy wprowadzić wielokropek nie w pierwszym wierszu, ale gdzieś, powiedzmy, w trzecim wierszu tekstu?

To jest miejsce, w którym line-clamppojawia się gra. Zwróć uwagę, że połączenie trzech właściwości służy do tego:

.line-clamp ( display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; )

Zobacz Pen-clamp (-webkit) autorstwa Geoffa Grahama (@geoffgraham) na CodePen.

Firefox obsługuje to teraz, dokładnie w ten sposób (z -webkit-prefiksami i wszystkimi innymi).

Więc jaki jest haczyk?

W tej chwili jest to obsługa przeglądarki. Zaciski liniowe są częścią modułu CSS Overflow Module Level 3, który jest obecnie w wersji roboczej redaktora i obecnie całkowicie nie jest obsługiwany.

Możemy uzyskać pewną akcję ograniczania linii z -webkit-prefiksem (co, co dziwne, działa we wszystkich głównych przeglądarkach). W rzeczywistości tak właśnie zostało zrobione powyższe demo.

Moglibyśmy przejść ścieżką JavaScript, gdybyśmy chcieli. Clamp.js załatwi sprawę:

Zobacz zacisk linii Pen (clamp.js) autorstwa Geoffa Grahama (@geoffgraham) na CodePen.

Wsparcie przeglądarki

Jest to potwierdzenie poprawności WebKit i nieudokumentowanej implementacji zacisku liniowego.

Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.