Omgaan met lange woorden en URL's (afbrekingen forceren, woordafbreking, ellips, enz.) - CSS-trucs

Anonim

Er zijn momenten waarop een hele lange reeks tekst de container van een lay-out kan overlopen.

Bijvoorbeeld:

Hier is de primeur:

  • overflow-wrap: break-word;zorgt ervoor dat de lange draad zich omwikkelt en niet uit de container barst. Je kunt net zo goed gebruiken word-wrap, want zoals de specificatie zegt, zijn het letterlijk slechts alternatieve namen voor elkaar. Sommige browsers ondersteunen de ene en de andere niet. Firefox (geteste v43) ondersteunt alleen word-wrap. Knipperen (geteste Chrome v45) duurt een van beide.
  • Omdat ze overflow-wrapop zichzelf worden gebruikt, zullen woorden een beetje breken waar ze maar nodig zijn. Als er een "acceptabel pauze" -teken is (zoals een letterlijk streepje, bijvoorbeeld), zal het daar breken, anders doet het gewoon wat het moet doen.
  • U kunt het net zo goed gebruiken hyphens, want dan zal het proberen om op smaakvolle wijze een koppelteken toe te voegen waar het afbreekt als de browser dit ondersteunt (Blink doet dit niet op het moment van schrijven, Firefox doet het).
  • word-break: break-all;is om de browser te vertellen dat het oké is om het woord te breken waar het maar moet. Ook al doet het dat toch een beetje, dus ik weet niet zeker in welke gevallen het 100% nodig is.

Als u meer handmatig met koppeltekens wilt werken, kunt u deze in uw opmaak voorstellen. Zie meer op de MDN-pagina.

Browser-ondersteuning

Voor word-break:

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.

Bureaublad

Chrome Firefox D.W.Z Rand Safari
44 15 5.5 12 9

Mobiel / tablet

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

Voor hypens:

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.

Bureaublad

Chrome Firefox D.W.Z Rand Safari
88 6 * 10 * 12 * 5,1 *

Mobiel / tablet

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

Voor overflow-wrap:

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.

Bureaublad

Chrome Firefox D.W.Z Rand Safari
23 49 11 18 6.1

Mobiel / tablet

Android Chrome Android Firefox Android iOS Safari
88 85 4.4 7.0-7.1

Voor text-overflow:

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.

Bureaublad

Chrome Firefox D.W.Z Rand Safari
4 7 6 12 3.1

Mobiel / tablet

Android Chrome Android Firefox Android iOS Safari
88 85 2.1 3.2

Overloop met ellips voorkomen

Een andere benadering om te overwegen is de tekst helemaal af te kappen en weglatingstekens toe te voegen waar de tekenreeks de container raakt:

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

Het leuke van het gebruik text-overflowis dat het universeel wordt ondersteund.

Voorbeelden

Zie de Pen Hyphenate Long Words by CSS-Tricks (@ css-tricks) op CodePen.

Zie de Pen Ellipsen door CSS-Tricks (@ css-tricks) op CodePen.

Zie de Pen uitzoeken Line Wrapping door Chris Coyier (@chriscoyier) op CodePen.

Meer middelen

  • Michael Scharnagl: Omgaan met lange woorden in CSS
  • Kenneth Auchenberg: Woordomloop / woordafbreking met behulp van CSS
  • MDN: woordomloop, woordafbreking, koppeltekens
  • Spec: CSS-tekstniveau 3

Voor de SCSS-geneigd

Dit zijn meestal dingen die je waar nodig in de code strooit, dus ze zorgen voor mooie @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; )