Podział słów - CSS-Tricks | Almanach CSS 2025

word-breakNieruchomość w CSS mogą być używane do zmiany, gdy podziały wiersza powinny występować. Zwykle podziały wierszy w tekście mogą wystąpić tylko w określonych odstępach, na przykład w przypadku spacji lub łącznika.

W poniższym przykładzie możemy word-breakzamiast tego zrobić między literami:

p ( word-break: break-all; )

Jeśli następnie ustawimy szerokość tekstu na jeden em, słowo będzie łamane o każdą literę:

Zobacz tekst ustawienia pióra w pionie z podziałem wyrazów według CSS-Tricks (@ css-tricks) w CodePen.

Ta wartość jest często używana w miejscach, w których znajdują się treści generowane przez użytkowników, więc długie ciągi nie powodują ryzyka uszkodzenia układu. Bardzo częstym przykładem jest długa kopia i wklejony adres URL. Jeśli ten adres URL nie ma łączników, może wykraczać poza pole nadrzędne i wyglądać źle lub gorzej, powodując problemy z układem.

Zobacz linki Naprawianie pisaków z podziałem wyrazów według CSS-Tricks (@ css-tricks) w CodePen.

Wartości

normal: użyj domyślnych reguł łamania słów.
break-all: każde słowo / litera może przejść do następnej linii.
keep-all: w tekście chińskim, japońskim i koreańskim wyrazy nie są łamane. W przeciwnym razie jest to to samo, co normal.

Ta właściwość jest również często używana w połączeniu z właściwością łączników, tak że w przypadku przerwania wstawiany jest myślnik, zgodnie ze standardem w książkach.

Pełne użycie, z wymaganymi prefiksami dostawców, to:

 -ms-word-break: break-all; word-break: break-all; /* Non standard for WebKit */ word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;

Korzystanie z tych właściwości w selektorze uniwersalnym może być przydatne, jeśli masz witrynę z dużą ilością treści generowanych przez użytkowników. Chociaż uczciwe ostrzeżenie, może wyglądać dziwnie w przypadku tytułów i wstępnie sformatowanego tekstu (

Związane z

overflow-wrap
Myślniki
Biała przestrzeń
Obsługa długich słów i adresów URL

Wsparcie przeglądarki

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.