Waar Regels Breken is Ingewikkeld. Hier is alle daarmee Verband houdende CSS en HTML.

0
21

Zeggen dat je een heel lang woord in een tekst binnen een element dat niet breed genoeg is om het te houden. Een veel voorkomende oorzaak van, dat is een lange URL in het vinden van de weg in kopie. Wat gebeurt er? Het hangt af van de CSS. Hoe dat met CSS is het controleren van de lay-out en wat de CSS is het vertellen van de tekst te doen.

Dit is wat een break-out de tekst situatie kan zijn:

De tekst van het hangen van de box is een visueel probleem.

Een mogelijkheid is overflow: hidden; dat is een beetje een stomp wapen dat het stopzetten van de tekst (of iets anders) van het rondhangen. Maar toch, het geeft de tekst een beetje ontoegankelijk. In sommige browsers met een muis gebruikt, kunt u in staat om triple-klik op de lijn om de URL te selecteren en te kopiëren, maar u kunt niet rekenen op iedereen weten dat of dat het mogelijk is in alle scenario ‘ s.

Overloop is het juiste woord hier, want dat is precies wat er gebeurt. We hebben overflow: auto; tot onze beschikking, wat zou leiden tot een horizontale scrollbar. Misschien geschikt zijn soms, maar ik neem aan dat we allemaal over eens dat het niet in het algemeen een aanvaardbare oplossing.

Wat we willen is de dang lange URL (of de tekst van welke aard dan ook) in te breken naar de volgende regel. Er zijn opties! Laten we beginnen met een plek om te proberen figuur dit spul uit.

Experimentele Speeltuin

Mijn idee is hier om te een worden vergroot of verkleind panel van content, in combinatie met een verscheidenheid van CSS eigenschap/waarden die u kunt in-en uitschakelen om de effecten te zien op de inhoud.

Dit is niet volledig of perfect uitgevoerd, ben ik zeker van. Het is slechts enkele van de eigenschappen die ik me bewust van ben.

Zie de Pen Uitzoeken omloop van Chris Coyier (@chriscoyier) op CodePen.

De Moker: “word-break: break-all;`

Laat woorden om gebroken te worden en overal. De word-break accommodatie kan “oplossen” van de problemen:

p {
word-break: break-all;
}

In een e-mail uitwisseling met fantasi, ze legde uit dat dit werkt, want het word-break-eigenschap herdefinieert wat een woord is. De break-all-waarde in hoofdzaak behandelt niet-CJK, zoals CJK, die kan breken zowat overal (behalve dingen zoals perioden en haakje sluiten). Het houden-al waarde heeft het omgekeerde, de behandeling van CJK-als niet-CJK.

Een Subtiele Correctie: `overloop-wrap: break-word;`

De overloop-wrap accommodatie lijkt de meest effectieve oplossing voor de problemen die we hebben neergelegd:

p {
word-wrap: break-word; /* de oude naam */
overloop-wrap: break-word;
}

Op het eerste gezicht zou het kunnen lijken erg op de word-break: break-all; de demo hierboven, maar merk op hoe in de URL in plaats van te breken “pen” op “pen”, het breekt aan het eind van dat woord waar de streep is. Mooier.

fantasai uitgelegd:

“Als een woord niet breken en zou daarom overloop, dan kan breken overal te voorkomen overloop”.

Een Zwaardere Correctie, Soms: `streepjes: auto;`

De streepjes eigendom doet wat je zou verwachten…zorgt voor woordafbreking in de lijn breekt. Streepjes kan soms doen de truc in Url ‘ s en lange woorden, maar het is niet gegarandeerd. Een lang nummer zou de reis, bijvoorbeeld. Plus, koppeltekens hebben invloed op alle tekst, het breken van woorden meer aan op de lippen om te helpen tekst knuffel die recht rand gelijkmatig.

p {
streepjes: auto;
}

fantasai vertelde mij:

“Als een ‘woord’ op het einde van de lijn, kunnen we afbreken.”

Ik denk dat “woord” helpt zet een vinger op het probleem. Sommige problematically lange tekenreeksen niet “woorden” kan dus niet worden geteld op te lossen alle overloop problemen.

Toekomst Mokerslag: `line-break: overal;`

Is er een eigenschap line-break. Het is vooral voor interpunctie, blijkbaar, maar ik kan niet schijnen om het te zien werken in elke browser. fantasai vertelt me dat er een nieuwe waarde riep ergens:

“word-break: break-all; behalve dat het breekt eigenlijk alles als een domme terminal client”

.

Andere HTML-Dingen

  • De <br> – element een regeleinde waar maakt. Tenzij het display: none;!
  • Het element is een “word-break gelegenheid” de betekenis van een lang woord dat zou normaal gesproken leiden tot een vervelende overloop probleem kan worden gezegd dat het ok is om te breken op een bepaald punt. Handig! Het gedraagt zich als een nul-breedte van de ruimte.

Andere Spullen CSS

  • De &shy; karakter net zoals de <wbr> element.
  • U kunt injecteren een regeleinde via psuedo elmement zoals ::before { content: “A”; } zolang elment niet inline (of als het is, het moet white-space: pre;)