成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

使用 <wbr> 解決長(zhǎng) URL 的換行問(wèn)題

lily_wang / 2122人閱讀

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

問(wèn)題

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

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

嘗試

原生方法無(wú)法解決問(wèn)題，只好摸索手動(dòng)斷行的做法。但是想完美解決問(wèn)題非常困難：

第一個(gè)方案是全部換行，肯定不行；

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

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

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

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

用 解決

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

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

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

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

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

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

總結(jié)

需要注意，

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/53963.html

相關(guān)文章

  • 使用 &lt;wbr&gt; 解決長(zhǎng) URL 的換行問(wèn)題

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

    104828720 評(píng)論0 收藏0

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

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

    _ivan 評(píng)論0 收藏0

  • CSS3 文本換行

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

    EasonTyler 評(píng)論0 收藏0

  • CSS3 文本換行

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

    chinafgj 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
      
<