长URL的更好的线路休息

CSS-Tricks先前已经解决了处理文本溢出的问题，但长期URL的全面解决方案仍然很少。克里斯·科伊尔（Chris Coyier）的2012年和2018年文章（“处理长词和网址”和“线路断裂的地方是复杂”）提供了宝贵的见解，建议利用浏览器本地文字断开和连字符的技术：

 .dont-Break-out {
  溢流包：break-word;
  word-trap：break-word;
  单词折断：break-word;
  连字符：自动；
}

但是，这些方法缺乏受控URL断裂所需的精度，尤其是在遵守特定样式指南时。

URL线路断裂的重要性

除了审美考虑之外，一致的URL格式至关重要。风格指南，例如《芝加哥风格手册》 ，为印刷URL打破的指南提供了指南，尽管它们为数字格式提供了宽大处理。但是，诸如印刷出版物，PDF，在线简历甚至保持视觉一致性之类的方案要求精确控制URL线路断路。

战略性URL休息位置

可读性至关重要。遵循芝加哥风格，休息时间应与标点符号保持一致：

• 结肠或双重斜线（ // ）之后
• 在单个斜线（ / ），tilde（ ~ ），周期（ . ），逗号（ , ），连字符（ - ），下划线（ _ ），问号（ ? ），数字符号（ # ）或百分比符号（ % ）
• & =之前或之后

避免引入人造连字符；尽管软连字符对单词断开有益，但在URL中可能会误解它们。优先在现有标点符号处休息。

掌握线路休息

该元素提供了解决方案。它标志着潜在的线路断裂而不强迫，允许浏览器选择最佳断裂点。考虑克里斯·科伊尔（Chris Coyier）2012年的帖子中的示例：

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

战略性添加标签：

 http：// www。 Amazon .com / s / ref = sr _ nr _ i _o？rh = k：鲨鱼真空吸尘器，i：花园和关键字=鲨鱼真空吸尘器＆ie = utf8＆qid = 1327784979

手动插入非常乏味，需要自动化。使用正则表达式的JavaScript函数可以自动化以下操作：

函数formaturl（url）{
  var DoubleSlash = url.split（'//'）;
  var格式= doubleslash.map（str =>
    str.replace（/（？<after> ：）/giu，'$ 1'）
      。代替（/（？<before>实际
      。代替（/（？<beforeandafter> [=＆]）/giu，'$ 1'）
    ）。加入（'// '）;
  返回格式；
}</beforeandafter></before></after>

实施和浏览器支持

现场演示展示了这种方法的有效性。与静态站点生成器集成进一步简化了该过程。享受广泛的浏览器支持，主要在较旧的IE版本中进行例外。使用伪元素和零宽度空间的CSS解决方法可增强兼容性：

 WBR：{之前{
  内容：“ \ 200b”；
  白色空间：正常；
}

优先考虑良好的URL会增强用户体验，而不论设计样式或目标介质如何。

参考

• 安德鲁，瑞秋。 2015年。“使用CSS进行印刷设计。” Smashing Magazine ，1月7日。https：//www.php.cn/link/68E4593563E1B425A77717504BCA103D6
• 安德鲁，瑞秋。 2018年。“ 2018年印刷风格的指南。” 5月1日， Smashing Magazine ， https：//www.php.cn/link/d8001036d6702e430b8e0924844444ee1
• Coyier，克里斯。 2012年。“处理长词和URL（强迫休息，连字符，省略号等）。” CSS-Tricks ，2012年1月30日。上次修改2018年7月25日。https ：//www.php.cn/link/link/f4d1f9e7d8c4235ad52ad52d48b2f213cc38
• Coyier，克里斯。 2018年。“线断裂很复杂。这是所有相关的CSS和HTML。” CSS-TRICKS ，2018年5月9日。上次修改2020年4月24日。https ：//www.php.cn/link/a18d17349a19926e194471414f74747474747474747d330d
• 芝加哥风格手册。 2017。第17版。芝加哥：芝加哥大学出版社。 https://www.php.cn/link/2E3A567DCC390811E4DFA8D478E4A149
• 王子。 nd“使用CSS将HTML转换为PDF。” 2021年2月25日访问。https ：//www.php.cn/link/13d8efdc6a5cb721fe721fe7031be062b9b74
• Unicode联盟。 2009。“特殊领域和格式字符”。在Unicode标准中。版本5.2.0。 https://www.php.cn/link/99407A87A33E79517280E0FDACDAA713
• Whatwg。 nd“ HTML：生活水平”。 2021年2月25日访问。https ：//www.php.cn/link/767d3dd25ed652d3333fa7743c0c2400fa

以上是长URL的更好的线路休息的详细内容。更多信息请关注PHP中文网其他相关文章！