Te hyphenskontrole własności dzielenia tekstu w elementach poziomie bloku. Możesz w ogóle zapobiec dzieleniu wyrazów, zezwolić na to lub zezwolić tylko na obecność określonych znaków.
Zauważ, że hyphensjest wrażliwy na język. Jego zdolność do znajdowania okazji do przerw zależy od języka zdefiniowanego w langatrybucie elementu nadrzędnego. Nie wszystkie języki są jeszcze obsługiwane, a obsługa zależy od konkretnej przeglądarki.
Składnia
p ( hyphens: none | manual | auto )łączniki: brak
Słowa nigdy nie są dzielone na znaki końca wiersza, nawet jeśli znaki w słowie sugerują, gdzie może lub powinno być dzielenie wyrazów.
łączniki: ręczne
Słowa są łamane tylko w przypadku końca wiersza, w którym znajdują się znaki, które sugerują możliwość podziału wiersza. Istnieją dwa znaki, które sugerują możliwość podziału wiersza:
U+2010(ŁĄCZNIK): znak łącznika „twardego” oznacza widoczną możliwość przełamania wiersza. Nawet jeśli linia nie jest w rzeczywistości przerwana w tym miejscu, łącznik jest nadal renderowany. Dosłownie „-”.U+00AD(SHY): niewidoczny, „miękki” łącznik. Ta postać nie jest widoczna; zamiast tego sugeruje miejsce, w którym przeglądarka może w razie potrzeby złamać słowo. W HTML możesz użyć-do wstawienia miękkiego łącznika.
łączniki: auto
Wyrazy można łamać w odpowiednich punktach dzielenia wyrazów, co jest określane przez znaki dzielenia wyrazów (patrz powyżej) w słowie lub zgodnie z ustaleniami automatycznie przez zasoby dzielenia wyrazów odpowiednie dla języka (jeśli są obsługiwane przez przeglądarkę lub dostarczane przez @hyphenation-resource).
Warunkowe znaki dzielenia wyrazów wewnątrz słowa, jeśli są obecne, mają pierwszeństwo przed automatycznymi zasobami podczas określania punktów dzielenia w słowie.
łączniki: wszystkie
Przestarzałe, nie używaj . Było to w specyfikacji tylko tymczasowo do testów.
Próbny
Poniższe demo zawiera kilka akapitów i wszystko ma na hyphens: auto;celu zademonstrowanie koncepcji dzielenia wyrazów. langAtrybut jest ustawiony enna elemencie nadrzędnym.
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.
Pulpit
| Chrom | Firefox | TO ZNACZY | Brzeg | Safari |
|---|---|---|---|---|
| 88 | 6 * | 10 * | 12 * | 5,1 * |
Telefon komórkowy / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 4,2-4,3 * |
Safari 5+ wymaga -webkit-, Firefox 6+ wymaga -moz-, IE 10+ wymaga -ms-, iOS 4.2+ wymaga -webkit-.
Chrome <55 i przeglądarka Android faktycznie obsługują -webkit-hyphens: none, co jest wartością domyślną, ale żadna z innych wartości.
W przeglądarkach Firefox i Internet Explorer automatyczne dzielenie wyrazów działa tylko dla niektórych języków (zdefiniowanych za pomocą langatrybutu). Zapoznaj się z pełną listą obsługiwanych języków.
Jeśli piszesz dokument internetowy, który naprawdę wymaga dzielenia wyrazów, możesz użyć Hyphenator.js, który jest biblioteką opartą na obszernym słowniku, który automatycznie wstawia do treści miękkie łączniki i spacje o zerowej szerokości.
Bez JavaScript będziesz musiał polegać na obu hyphensi word-wrap:
.hyphenate ( word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; )