国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

使用 <wbr> 解決長 URL 的換行問題

104828720 / 2133人閱讀

摘要：開發中，屏幕寬度有限，超長文字必須換行。嘗試原生方法無法解決問題，只好摸索手動斷行的做法。用解決這個問題困擾了我很久，直到前兩天，我突然發現原來有軟換行的存在。本案例中，使用實際上是想借用瀏覽器計算表格各列寬度的機制。

問題

我們知道，世界上文字主要有兩種：一種是以中文為代表的象形文字；另一種是以英法俄等為代表的拼音語系。前者的換行很簡單，每個單字都有自己的意義，所以每個字后面都可以換行。拼音語言，字母組合本身無意義，連在一起才有意義；不同單詞意義差異巨大，所以只能以單詞為單位換行。

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 方案” 就必須放棄這個算法自己手動實現，成本很高，非萬不得已也不想做。

最后，動態換行，根據表格寬度計算在哪里斷行。還是不行，計算難度太大。

用 解決

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

它的含義是“可換可不換”。當元素寬度不夠需要換行，就從它這里換；如果寬度夠，就不換行。所以，只需要在“可能”換行的地方加上這個元素，就可以達成我的目標。寫成代碼很簡單，大約是這樣：

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

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

實際效果很好，大概是這樣（截圖時， 放在斷開位置的后面，我覺得不好看，就調整了下）：

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

總結

需要注意，

的渲染很特殊，瀏覽器要花很多時間計算每個列的內容、計算它的寬度，所以性能會比較差，這也是不要用
做布局的原因。本案例中，使用 實際上是想借用瀏覽器計算表格各列寬度的機制。所以是合適的。表格渲染之后，內容最好就固定住，不要有復雜的變動，比如隱藏/顯示（前面說的8.3格式），因為內容的變化會導致瀏覽器重新計算布局重新渲染，比較消耗機器的性能。

以及，做了十幾年前端，稍一放松，竟然有完全不清楚沒用過的標簽，看來有必要找時間再把 HTML、CSS 再翻一遍了。

本文首發于我的博客，兩邊同步更新，歡迎同學與我交流。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114727.html

相關文章

  • 使用 &lt;wbr&gt; 解決長 URL 的換行問題

    摘要：開發中，屏幕寬度有限，超長文字必須換行。嘗試原生方法無法解決問題，只好摸索手動斷行的做法。用解決這個問題困擾了我很久，直到前兩天，我突然發現原來有軟換行的存在。本案例中，使用實際上是想借用瀏覽器計算表格各列寬度的機制。 問題 我們知道，世界上文字主要有兩種：一種是以中文為代表的象形文字；另一種是以英法俄等為代表的拼音語系。前者的換行很簡單，每個單字都有自己的意義，所以每個字后面都可以換...

    lily_wang 評論0 收藏0

  • HTML入門學習筆記（二）

    摘要：重要或強調文本表示重要的文本，表示強調。標記代碼使用標記代碼文件名工程名等，要顯示單獨的一塊代碼，可以使用元素包住元素以維持其格式。不要將作為以逃避合適的語義標記內容和控制樣式的快捷方式。和元素旁注標記，通常表示生僻字的發音。 第三章 文本 段落 p 毫不奇怪，p是最常用到的HTML元素之一 作者聯系信息 address address并不是用于標記郵政地址，而是定義與HTML頁面或...

    _ivan 評論0 收藏0

  • CSS3 文本換行

    摘要：文本換行其實是個非常常用但并不起眼的特性。在中日韓文情況下，和有區別，見下圖中日韓文情況下，仍舊等于沒有設，瀏覽器選擇在文字或標點符號處換行。但設成后，將不再允許斷詞哪怕是中日韓文，只能像英語系一樣根據半角空格或標點來換行。 文本換行其實是個非常常用但并不起眼的特性。你什么都不用設，瀏覽器自動就會換行。例如英語，瀏覽器會根據容器尺寸，選擇在半角空格或連字符處換行。例如中文，瀏覽器會選擇...

    EasonTyler 評論0 收藏0

  • CSS3 文本換行

    摘要：文本換行其實是個非常常用但并不起眼的特性。在中日韓文情況下，和有區別，見下圖中日韓文情況下，仍舊等于沒有設，瀏覽器選擇在文字或標點符號處換行。但設成后，將不再允許斷詞哪怕是中日韓文，只能像英語系一樣根據半角空格或標點來換行。 文本換行其實是個非常常用但并不起眼的特性。你什么都不用設，瀏覽器自動就會換行。例如英語，瀏覽器會根據容器尺寸，選擇在半角空格或連字符處換行。例如中文，瀏覽器會選擇...

    chinafgj 評論0 收藏0

發表評論

0條評論

104828720

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
      
<