Une meilleure ligne se casse pour les longues URL

CSS-Tricks a précédemment abordé la gestion du texte débordant, mais les solutions complètes pour les longues URL restent rares. Les articles 2012 et 2018 de Chris Coyier («manipulation de longs mots et URL» et «où les lignes se cassent») offrent des informations précieuses, suggérant que les techniques tirant partisant du navigateur natif et des caractéristiques de traits de trait de mots:

 .Dont-Break-Out {
  débordement de débordement: mot de rupture;
  Word-Wrap: Break-Word;
  Bris de mot: mot de rupture;
  Houstènes: Auto;
}

Cependant, ces méthodes n'ont pas la précision nécessaire aux ruptures d'URL contrôlées, en particulier lors de l'adhésion à des guides de style spécifiques.

L'importance des ruptures de ligne d'URL

Mis à part les considérations esthétiques, la mise en forme cohérente de l'URL est cruciale. Les guides de style, tels que le Chicago Manual of Style , fournissent des lignes directrices pour les pauses d'URL sur papier, bien qu'elles offrent une clémence aux formats numériques. Cependant, des scénarios comme les publications imprimées, les PDF, les curriculum vitae en ligne ou même le maintien de la cohérence visuelle exigent un contrôle précis sur les ruptures de ligne d'URL.

Placement de rupture d'URL stratégique

La lisibilité est primordiale. Après le style de Chicago , les pauses doivent s'aligner sur la ponctuation:

• Après un côlon ou une double barre oblique ( // )
• Avant une seule barre oblique ( / ), Tilde ( ~ ), période ( . ), Virgule ( , ), trait d'union ( - ), soulignement ( _ ), point d'interrogation ( ? ), Signe de nombre ( # ) ou pourcentage de symbole ( % )
• Avant ou après un signe égal ( = ) ou ampère et ( & )

Évitez d'introduire des tirets artificiels; Bien que les traits de douceur soient bénéfiques pour les pauses de mots, ils peuvent être mal interprétés dans les URL. Prioriser les pauses aux points de ponctuation existants.

La ligne de maîtrise se brise avec

L'élément fournit une solution. Il signale une rupture de ligne potentielle sans en forcer une, permettant au navigateur de choisir le point de rupture optimal. Considérez cet exemple de la publication 2012 de Chris Coyier:

 <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>

Ajout de balises stratégiquement:

 http: // www. Amazon .com / s / ref = sr _ nr _ i _o? rh = k: vide de requin, i: jardin et mots clés = vide de requin & ie = utf8 & qid = 1327784979

L'insertion manuelle est fastidieuse, nécessitant l'automatisation. Une fonction JavaScript utilisant des expressions régulières peut automatiser ceci:

 Fonction Formaturl (URL) {
  var doubleslash = url.split ('//');
  var formated = douleslash.map (str =>
    str.replace (/ (?<after> :) / giu, «1 $»)
      .remplacer(/(?<before> [/~.,\-_?#%
      .remplacer(/(?<beforeandafter> [= &]) / giu, «1 $»)
    ).rejoindre('// ');
  Retour formaté;
}</beforeandafter></before></after>

Implémentation et support du navigateur

Une démo en direct présente l'efficacité de cette approche. L'intégration avec des générateurs de sites statiques rationalise en outre le processus. Aime un large support de navigateur, à des exceptions principalement dans les versions plus anciennes IE. Une solution de contournement CSS utilisant un pseudo-élément et un espace à largeur zéro améliore la compatibilité:

 wbr: avant {
  Contenu: "\ 200b";
  Espace blanc: normal;
}

Prioriser les URL bien formulées améliore l'expérience utilisateur, quel que soit le style de conception ou le support cible.

Références

• Andrew, Rachel. 2015. «Conception pour imprimer avec CSS». Smashing Magazine , 7 janvier. Https://www.php.cn/link/68e4593563e1b425a7717504bca103d6
• Andrew, Rachel. 2018. «Un guide de l'état des styles d'impression en 2018.» Smashing Magazine , 1er mai. Https://www.php.cn/link/d8001036d6702e430b8e092484444eee1
• Coyier, Chris. 2012. «Gestion des mots longs et des URL (des pauses de forçage, une trait de génie, des ellipses, etc.).» CSS-Tricks , 30 janvier 2012. Dernière modification le 25 juillet 2018. Https://www.php.cn/link/f4d1f9e7d8c4235ad52d48b2f213cc38
• Coyier, Chris. 2018. «Où les lignes se cassent est compliquée. Voici tous les CSS et HTML associés.» CSS-Tricks , 9 mai 2018. Dernière modification le 24 avril 2020. Https://www.php.cn/link/A18D17349A19926E1944714F747D330D
• Le manuel de style de Chicago . 2017. 17e éd. Chicago: University of Chicago Press. https://www.php.cn/link/2e3a567dcc390811e4dfa8d478e4a149
• Prince. ND «Convertir HTML en PDF avec CSS». Consulté le 25 février 2021. Https://www.php.cn/link/13d8efdc6a5cb721fe7031be062b9b74
• Le consortium Unicode. 2009. «Zones spéciales et caractères de format». Dans la norme Unicode . Version 5.2.0. https://www.php.cn/link/99407a87a33e79517280e0fdacdaa713
• Whatwg. ND «HTML: Norme de vie». Consulté le 25 février 2021. Https://www.php.cn/link/767d3dd25ed652d33fa7743c0c2400fa

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!