Przejdź do treści
TextArray1.87.0
100% lokalnie

Generator CSS line-clamp

Wygeneruj regułę CSS, która skróci tekst do ustalonej liczby wierszy z elipsą lub efektem zanikania.

Wynik
Powiązane narzędzia
Generator CSS clamp()Narzędzia dla programistów
Skróć tekstManipulacja tekstem
Generator CSS text-shadownoweNarzędzia dla programistów
różnica kluczy i18nNarzędzia dla programistów
Konwerter TOML na JSONNarzędzia dla programistów
SQL do JSONNarzędzia dla programistów
Generator CSS line-clamp
Nagłówki kart, opisy produktów i podglądy komentarzy — ostatecznie wszystko potrzebuje tego samego triku: pokazać kilka wierszy tekstu i wyraźnie go skończyć zamiast pozwolić długiemu akapitowi wybić się z układu. Ten generator napisa dla ciebie regułę CSS, gotową do wklejenia do arkuszy jako klasa ".line-clamp".
Wybierz tryb jednego wiersza dla jedno-wierszowego obcinania — klasyczną kombinację "overflow: hidden; text-overflow: ellipsis; white-space: nowrap" używaną do nagłówków i komórek tabeli — lub tryb wielu wierszy, który używa "-webkit-line-clamp" do obcinania po wybraną liczbę wierszy, honorując wysokość linii którą ustawisz. Włącz opcję zanikania, aby ostatni wiersz miękkko rozpłynął się w tle za pomocą gradientu zamiast twardej elipsy, co wygląda lepiej na obrazku lub kolorowej karcie. Opcja fallback dodaje blok "@supports", więc przeglądarki bez obsługi line-clamp nadal otrzymają rozsądne obcinanie max-height zamiast nieskalowanej ściany tekstu, a opcja Tailwind dołącza odpowiadającą klasę utility ("truncate" lub "line-clamp-N") jako komentarz, więc nie musisz jej szukać.
Wpisz lub wklej zdanie w pole podglądu i narzędzie szacuje, jak twój tekst podzielić się na wybranych wierszach, abyś mógł sprawdzić liczbę wierszy przed zatwierdzeniem projektu. Szacunek oparty jest na średniej długości czytelnego wiersza, a nie na pomiarach rzeczywistych czcionek i kontenerów — to przewodnik do wyboru rozsądnej liczby wierszy, nie pixel-dokładne renderowanie.
Wszystko działa lokalnie w twojej przeglądarce: CSS generuje się w miarę pisania, nic nigdzie nie jest przesyłane, a wynik możesz skopiować, pobrać jako plik .txt lub wysłać bezpośrednio do wejścia innego narzędzia, aby kontynuować pracę.
Częste pytania
Jaka jest różnica między obcinaniem jednego i wielu wierszy?
Jeden wiersz używa text-overflow: ellipsis z white-space: nowrap i działa w każdej przeglądarce. Wiele wierszy używa -webkit-line-clamp do obcinania po wybraną liczbę wierszy, co wymaga ustawienia display: -webkit-box, które wygeneruje to narzędzie.
Dlaczego opcja zanikania usuwa -webkit-line-clamp?
Gradient zanikania wymaga stałej max-height i umieszczonego pseudo-elementu, nie modelu pudełka line-clamp, więc narzędzie przechodzi na regułę opartą na max-height, gdy zanikanie jest włączone — dla trybów jednowiersz i wielowierszowych.
Czy nadal potrzebuję fallback dla nowoczesnych przeglądarek?
Wszystkie obecne główne przeglądarki obsługują -webkit-line-clamp, więc fallback chroni przede wszystkim starsze lub niezwykłe przeglądarki. Bezpiecznie jest go pozostawić włączonym: obowiązuje tylko wewnątrz bloku "@supports not", który nowoczesne przeglądarki ignorują.
Jak dokładny jest podgląd?
To szacunek oparty na średniej długości wiersza, a nie na pomiarach twoich rzeczywistych czcionek czy szerokości kontenera. Użyj go do oceny, czy twoja wybrana liczba wierszy jest odpowiednia, potem sprawdź rzeczywisty wynik na swojej stronie.
Czy mój tekst podglądu jest gdzieś przesyłany?
Nie. CSS i podgląd generują się całkowicie w twojej przeglądarce — nic co wpiszesz nie jest wysyłane na serwer.