Gestionarea cuvintelor lungi și a adreselor URL (pauze forțate, cratimare, elipsă etc.) - CSS-Tricks

Anonim

Există momente în care un șir de text foarte lung poate revărsa containerul unui aspect.

De exemplu:

Iată scoopul:

  • overflow-wrap: break-word;se asigură că șirul lung se va înfășura și nu va ieși din recipient. La fel de bine s-ar putea folosi word-wrapși pentru că, așa cum spune specificația, acestea sunt literalmente doar nume alternative unul pentru celălalt. Unele browsere acceptă unul și nu celălalt. Firefox (testat v43) acceptă numai word-wrap. Blink (testat Chrome v45) va lua oricare.
  • Folosite overflow-wrapde unul singur, cuvintele se vor rupe cam oriunde au nevoie. Dacă există un caracter de „pauză acceptabilă” (cum ar fi o liniuță literală, de exemplu), se va rupe acolo, altfel face doar ceea ce trebuie să facă.
  • S-ar putea să utilizați la hyphensfel de bine, pentru că atunci va încerca să adauge cu gust o cratimă unde se sparge dacă browserul o acceptă (Blink nu o face la momentul scrierii, Firefox o face).
  • word-break: break-all;este să spui browserului că este OK să spui cuvântul oriunde trebuie. Chiar dacă face asta cam oricum, așa că nu sunt sigur în ce cazuri este necesar 100%.

Dacă doriți să fiți mai manual cu cratime, le puteți sugera în marcajul dvs. Vedeți mai multe pe pagina MDN.

Suport pentru browser

Pentru word-break:

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
44 15 5.5 12 9

Mobil / Tabletă

Android Chrome Android Firefox Android Safari iOS
88 85 81 9.0-9.2

Pentru hypens:

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
88 6 * 10 * 12 * 5.1 *

Mobil / Tabletă

Android Chrome Android Firefox Android Safari iOS
88 85 81 4.2-4.3 *

Pentru overflow-wrap:

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

Pentru text-overflow:

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
4 7 6 12 3.1

Mobil / Tabletă

Android Chrome Android Firefox Android Safari iOS
88 85 2.1 3.2

Prevenirea revărsării cu elipsă

O altă abordare de luat în considerare este tăierea completă a textului și adăugarea de puncte de suspensie în cazul în care șirul de text lovește containerul:

.ellipses ( overflow: hidden; white-space: nowrap; text-overflow: ellipsis; )

Acest lucru frumos despre utilizare text-overfloweste că este acceptat universal.

Exemple

Vedeți Cuvintele lungi Crăciun cu stilou de CSS-Tricks (@ css-tricks) pe CodePen.

Vedeți Elipsele stiloului de CSS-Tricks (@ css-tricks) pe CodePen.

Vedeți Pen-ul care descrie linia de împachetare de Chris Coyier (@chriscoyier) pe CodePen.

Mai multe resurse

  • Michael Scharnagl: Tratarea cuvintelor lungi în CSS
  • Kenneth Auchenberg: Înfășurarea / cratimarea cuvintelor folosind CSS
  • MDN: word-wrap, word-break, cratime
  • Spec: CSS Text Nivelul 3

Pentru înclinația SCSS

Acestea tind să fie genul de lucruri pe care le stropiți în cod acolo unde este necesar, așa că fac frumos @mixins:

@mixin word-wrap() ( overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-all; word-break: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; )
@mixin ellipsis() ( overflow: hidden; white-space: nowrap; text-overflow: ellipsis; )