使用 解決長 URL 的換行問題

問題

咱們知道，世界上文字主要有兩種：一種是以中文爲表明的象形文字；另外一種是以英法俄等爲表明的拼音語系。前者的換行很簡單，每一個單字都有本身的意義，因此每一個字後面均可以換行。拼音語言，字母組合自己無心義，連在一塊兒纔有意義；不一樣單詞意義差別巨大，因此只能以單詞爲單位換行。

Web 開發中，屏幕寬度有限，超長文字必須換行。在 CSS 中，控制換行的屬性主要有 word-break，white-space，其中，默認換行行爲的是 word-break: normal，即以單詞爲單位換行。比較奇怪的是，對於 URL，我本覺得相似 /.:?& 都是明顯的單詞分隔符，理應換行，但實際上，瀏覽器並不會在這些地方換行。若是咱們使用 break-all 或者 break-word，則會使得瀏覽器在不合理的地方換行，若是恰好在表格裏，別的列內容比較多，那麼包含 URL 的單元格就會被擠壓得很是窄，拉得特別高，很是難看，很是難讀。

嘗試

原生方法沒法解決問題，只好摸索手動斷行的作法。可是想完美解決問題很是困難：

第一個方案是所有換行，確定不行；

第二個方案固定寬度換行，由於表格內容不固定，效果也不好，也不行；

老闆提出了第三個方案：使用「8.3」格式，即超長字符串只保留前8個字符，後面顯示「..."，而後能夠手動展開。很明顯，這個方案對 URL 來講沒有什麼價值，https:// 加起來正好 8 個字符，有意義麼……即便加長也同樣，由於用戶有時候看域名，有時候看 pathname，也有時候看 search，咱們沒有辦法預測。

而後老闆又提出「Excel 方案」，即固定列寬，自動隱藏超出的文字，用戶能夠經過拖拽來調整列寬。這個方案理論上能夠解決問題，可是實現難度太大，由於瀏覽器自帶表格自適應寬度的算法，採用 「Excel 方案」 就必須放棄這個算法本身手動實現，成本很高，非萬不得已也不想作。

最後，動態換行，根據表格寬度計算在哪裏斷行。仍是不行，計算難度太大。

用 <wbr> 解決

這個問題困擾了我好久，直到前兩天，我忽然發現原來有 <wbr> 軟換行的存在。並且它的兼容性很是之好，甚至連 IE8 都支持。

它的含義是「可換可不換」。當元素寬度不夠須要換行，就從它這裏換；若是寬度夠，就不換行。因此，只須要在「可能」換行的地方加上這個元素，就能夠達成個人目標。寫成代碼很簡單，大約是這樣：

function wrapUrl(url) {
  if (!url) {
    return '';
  }

  // 先把協議取出來，我不但願在協議這裏換行
  const head = url.substring(0, 10);
  const left = url.substring(10);
  // 在 `?&/` 前面插入 `<wbr>`
  // 或者16個連續英文數字也要換行，打斷 hash 和 md5
  return head + left.replace(/([?&\/]|([a-zA-Z0-9]{16}))/g, str => '<wbr>' + str );
}

實際效果很好，大概是這樣（截圖時，<wbr> 放在斷開位置的後面，我以爲很差看，就調整了下）：

與 <br> 對比，後者是固定換行，當表格內容不多，有充足的空間顯示 URL 時，也會換行，就不合適了。

總結

須要注意，<table> 的渲染很特殊，瀏覽器要花不少時間計算每一個列的內容、計算它的寬度，因此性能會比較差，這也是不要用 <table> 作佈局的緣由。本案例中，使用 <wbr> 其實是想借用瀏覽器計算表格各列寬度的機制。因此是合適的。表格渲染以後，內容最好就固定住，不要有複雜的變更，好比隱藏/顯示（前面說的8.3格式），由於內容的變化會致使瀏覽器從新計算佈局從新渲染，比較消耗機器的性能。

以及，作了十幾年前端，稍一放鬆，居然有徹底不清楚沒用過的標籤，看來有必要找時間再把 HTML、CSS 再翻一遍了。

---

本文首發於個人博客，兩邊同步更新，歡迎同窗與我交流。