長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中文網其他相關文章！