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

資訊專欄INFORMATION COLUMN

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

lily_wang / 2098人閱讀

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

問題

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

Web 開發(fā)中，屏幕寬度有限，超長文字必須換行。在 CSS 中，控制換行的屬性主要有 word-break，white-space，其中，默認(rèn)換行行為的是 word-break: normal，即以單詞為單位換行。比較奇怪的是，對于 URL，我本以為類似 /.:?& 都是明顯的單詞分隔符，理應(yīng)換行，但實(shí)際上，瀏覽器并不會在這些地方換行。如果我們使用 break-all 或者 break-word，則會使得瀏覽器在不合理的地方換行，如果剛好在表格里，別的列內(nèi)容比較多，那么包含 URL 的單元格就會被擠壓得非常窄，拉得特別高，非常難看，非常難讀。

嘗試

原生方法無法解決問題，只好摸索手動斷行的做法。但是想完美解決問題非常困難：

第一個方案是全部換行，肯定不行；

第二個方案固定寬度換行，因?yàn)楸砀駜?nèi)容不固定，效果也很差，也不行；

老板提出了第三個方案：使用“8.3”格式，即超長字符串只保留前8個字符，后面顯示“..."，然后可以手動展開。很明顯，這個方案對 URL 來說沒有什么價(jià)值，https:// 加起來正好 8 個字符，有意義么……即使加長也一樣，因?yàn)橛脩粲袝r候看域名，有時候看 pathname，也有時候看 search，我們沒有辦法預(yù)測。

然后老板又提出“Excel 方案”，即固定列寬，自動隱藏超出的文字，用戶可以通過拖拽來調(diào)整列寬。這個方案理論上可以解決問題，但是實(shí)現(xiàn)難度太大，因?yàn)闉g覽器自帶表格自適應(yīng)寬度的算法，采用 “Excel 方案” 就必須放棄這個算法自己手動實(shí)現(xiàn)，成本很高，非萬不得已也不想做。

最后，動態(tài)換行，根據(jù)表格寬度計(jì)算在哪里斷行。還是不行，計(jì)算難度太大。

用 解決

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

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

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

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

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

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

總結(jié)

需要注意，

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

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

本文首發(fā)于我的博客，兩邊同步更新，歡迎同學(xué)與我交流。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/53963.html

相關(guān)文章

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

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

    104828720 評論0 收藏0

  • HTML入門學(xué)習(xí)筆記（二）

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

    _ivan 評論0 收藏0

  • CSS3 文本換行

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

    EasonTyler 評論0 收藏0

  • CSS3 文本換行

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

    chinafgj 評論0 收藏0

發(fā)表評論

0條評論

lily_wang

男|高級講師

TA的文章

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