Word-break - CSS-Tricks

Anonim

word-breakProprietatea î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-breakschimb 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 ca normal.

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-allvaloarea, dar nukeep-all