word-break
Proprietatea în CSS poate fi folosit pentru a schimba atunci când pauze de linie ar trebui să apară. În mod normal, întreruperile de linie din text pot apărea numai în anumite spații, cum ar fi atunci când există un spațiu sau o cratimă.
În exemplul de mai jos putem face în word-break
schimb literele dintre:
p ( word-break: break-all; )
Dacă setăm lățimea textului la unul em
, cuvântul se va sparge cu fiecare literă:
Vedeți textul Setare stilou pe verticală cu pauză de cuvinte de CSS-Tricks (@ css-tricks) pe CodePen.
Această valoare este adesea utilizată în locuri cu conținut generat de utilizator, astfel încât șirurile lungi să nu riscă să rupă aspectul. Un exemplu foarte comun este o copie lungă și o adresă URL lipită. Dacă adresa URL respectivă nu are cratime, se poate extinde dincolo de caseta părinte și poate arăta rău sau mai rău, poate cauza probleme de aspect.
Vedeți link-urile de corecție a stiloului cu pauză de cuvinte prin CSS-Tricks (@ css-tricks) pe CodePen.
Valori
normal
: utilizați regulile implicite pentru separarea cuvintelor.break-all
: orice cuvânt / literă poate intra pe următoarea linie.keep-all
: pentru textul chinezesc, japonez și coreean cuvintele nu sunt rupte. În caz contrar , acest lucru este la fel canormal
.
Această proprietate este, de asemenea, adesea utilizată împreună cu proprietatea cratime, astfel încât, atunci când apar pauze, să se introducă o cripă, conform standardului din cărți.
Utilizarea completă, cu prefixurile necesare pentru furnizor, este:
-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;
Utilizarea acestor proprietăți pe selectorul universal poate fi utilă dacă aveți un site cu mult conținut generat de utilizatori. Deși avertisment corect, poate părea ciudat pentru titluri și text pre-formatat (
).Legate de
- overflow-wrap
- cratime
- spatiu alb
- Gestionarea cuvintelor lungi și a adreselor URL
Suport pentru browser
Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.
Desktop
Crom | Firefox | IE | Margine | Safari |
---|---|---|---|---|
23 | 49 | 11 | 18 | 6.1 |
Mobil / Tabletă
Android Chrome | Android Firefox | Android | Safari iOS |
---|---|---|---|
88 | 85 | 4.4 | 7.0-7.1 |
Safari și iOS acceptă break-all
valoarea, dar nukeep-all