Bessere Linienbrüche für lange URLs

CSS-Tricks hat zuvor über den Überflusstext mit dem Handhabungsverlauf gerichtet, aber umfassende Lösungen für lange URLs sind weiterhin knapp. Die Artikel von Chris Coyier 2012 und 2018 ("Langwörter und URLs mit dem Umgang mit komplizierten Leitungen") bieten wertvolle Erkenntnisse, was auf Techniken schlägt, die die Merkmale von Browser-nativen Wortbrüchen und Bindestrichen nutzen:

 .Dont-Break-out {
  Überlaufwerk: Breakwort;
  WORT-WRAP: Breakwort;
  Wortausbruch: Breakwort;
  Bindestriche: Auto;
}

In diesen Methoden fehlt jedoch die Präzision, die für kontrollierte URL -Pausen benötigt wird, insbesondere wenn sie sich an bestimmte Stilführer einhalten.

Die Bedeutung der URL -Linie bricht

Abgesehen von ästhetischen Überlegungen ist eine konsistente URL -Formatierung von entscheidender Bedeutung. Style Guides wie das Chicago -Manual of Style bieten Richtlinien für URL -Pausen im Druck, obwohl sie nach Nachsicht für digitale Formate bieten. Szenarien wie Printveröffentlichungen, PDFs, Online -Lebensläufe oder sogar die visuelle Konsistenzbedarfsdauer der genauen Kontrolle über URL -Linienpausen.

Strategische URL -Break -Platzierung

Die Lesbarkeit ist von größter Bedeutung. Nach dem Chicago -Stil sollten die Pausen mit der Interpunktion übereinstimmen:

• Nach einem Dickdarm oder einem doppelten Schrägstrich ( // )
• Vor einem einzelnen Schrägstrich ( / ), Tilde ( ~ ), Periode ( . ), Komma ( , ), Hyphen ( - ), Unterstrich ( _ ), Fragemarkel ( ? ), Zahlenzeichen ( # ) oder Prozent Symbol ( % )
• Vor oder nach einem Gleichstromzeichen ( = ) oder Ampersand ( & )

Vermeiden Sie es, künstliche Bindestriche einzuführen. Während weiche Bindestriche für Wortbrüche von Vorteil sind, können sie in URLs falsch interpretiert werden. Priorisieren Sie Pausen an bestehenden Interpunktionspunkten.

Mastering -Linie bricht mit

Das Element liefert eine Lösung. Es signalisiert einen potenziellen Linienbrecher, ohne einen zu erzwingen, sodass der Browser den optimalen Bruchpunkt auswählen kann. Betrachten Sie dieses Beispiel aus Chris Coyiers 2012er Beitrag:

 <code>http://www.amazon.com/s/ref=sr_nr_i_o?rh=k:shark vacuum,i:garden&keywords=shark vacuum&ie=UTF8&qid=1327784979</code>

Hinzufügen von Tags strategisch:

 http: // www. Amazon .com / s / ref = sr _ nr _ i _o? rh = k: haienvakuum, i: garten & keywords = Shark Vakuum & IE = UTF8 & qid = 1327784979

Die manuelle Einführung ist mühsam und erfordert Automatisierung. Eine JavaScript -Funktion unter Verwendung regulärer Ausdrücke kann dies automatisieren:

 Funktionsformatur (URL) {
  var DoubleSLash = url.split ('//');
  var formatiert = doppellash.map (str =>
    Str.Replace (/(?<after> :)/giu, '$ 1')
      .ersetzen(/(?<before> [/~.
      .ersetzen(/(?<beforeandafter> [= &])/giu, '$ 1')
    ).verbinden('// ');
  Rückkehr formatiert;
}</beforeandafter></before></after>

Implementierung und Browserunterstützung

Eine Live -Demo zeigt die Wirksamkeit dieses Ansatzes. Die Integration mit statischen Site -Generatoren rationalisiert den Prozess weiter. genießt einen breiten Browserunterstützung mit Ausnahmen hauptsächlich in älteren IE -Versionen. Eine CSS-Problemumgehung unter Verwendung eines Pseudoelements und eines Null-Breiten-Raums verbessert die Kompatibilität:

 WBR: Vor {
  Inhalt: "\ 200b";
  weißer Raum: normal;
}

Die Priorisierung gut formatierter URLs verbessert die Benutzererfahrung, unabhängig vom Designstil oder Zielmedium.

Referenzen

• Andrew, Rachel. 2015. „Entwerfen für Druck mit CSS.“ Smashing Magazine , 7. Januar .
• Andrew, Rachel. 2018. "Ein Leitfaden für den Stand der Druckstile im Jahr 2018." Smashing Magazine , 1. Mai https://www.php.cn/link/d8001036d6702e430b8e09248444ee
• Coyier, Chris. 2012. "Umgang mit langen Wörtern und URLs (Erzwingen von Pausen, Bindestrich, Ellipsis usw.)." CSS-Tricks , 30. Januar 2012. Zuletzt geändert 25. Juli 2018 .
• Coyier, Chris. 2018. „Wo die Linien brechen. Hier sind alle verwandten CSS und HTML.“ CSS-Tricks , 9. Mai 2018. Zuletzt geändert 24. April 2020. https://www.php.cn/link/a18d17349a19926e1944714f747d330d
• Das Chicago -Handbuch des Stils . 2017. 17. Aufl. Chicago: University of Chicago Press. https://www.php.cn/link/2e3a567dcc390811e4dfa8d478e4a149
• Prinz. nd "Konvertieren Sie HTML in PDF mit CSS." Zugriff am 25. Februar 2021.
• Das Unicode -Konsortium. 2009. „Spezielle Bereiche und Formatfiguren.“ Im Unicode -Standard . Version 5.2.0. https://www.php.cn/link/99407A87A33E79517280E0FDACDAA713
• Waswg. ND "HTML: Living Standard." Zugriff am 25. Februar 2021.

Das obige ist der detaillierte Inhalt vonBessere Linienbrüche für lange URLs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!