1. <li id="km404"></li>

    <li id="km404"><acronym id="km404"><u id="km404"></u></acronym></li>
    <button id="km404"></button>

        1. <rp id="km404"></rp>
          <progress id="km404"></progress>

          小技巧!CSS 整塊文本溢出省略特性探究

          來源:掘金
          2021-03-13
          3189
          導語:對于單行文本,使用單行省略,而對于多行文本的超長省略,使用 -webkit-line-clamp 相關屬性,兼容性也已經非常好了。
          閱讀本文大概需要3分鐘

          我們都知道,到今天(2020/03/06),CSS 提供了兩種方式便于我們進行文本超長的打點省略。

          對于單行文本,使用單行省略:

          {
              width: 200px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
          }
          復制代碼

          image

          而對于多行文本的超長省略,使用 -webkit-line-clamp 相關屬性,兼容性也已經非常好了:

          {
              width: 200px;
              overflow : hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
          }
          復制代碼

          image

          CodePen Demo -- inline-block 實現整塊的溢出打點

          問題一:超長文本整塊省略

          基于上述的超長打點省略方案之下,會有一些變化的需求。譬如,我們有如下結構:

          <section>
              <a href="/" class="avatar"></a>
              <div class="info">
                  <p class="person-card__name">Sb Coco</p>
                  <p class="person-card__desc">
                      <span>FE</span>
                      <span>UI</span>
                      <span>UX Designer</span>
                      <span>前端工程師</span>
                  </p>
              </div>
          </section>
          復制代碼

          image

          對于上述超出的情況,我們希望對于超出文本長度的整一塊 -- 前端工程師,整體被省略。

          如果我們直接使用上述的方案,使用如下的 CSS,結果會是這樣,并非我們期待的整塊省略:

          .person-card__desc {
              width: 200px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
          }
          復制代碼

          image

          display: inline 改為 display: inline-block 實現整塊省略

          這里,如果我們需要實現一整塊的省略,只需要將包裹整塊標簽元素的 spandisplayinline 改為 inline-block 即可。

          .person-card__desc span {
              display: inline-block;
          }
          復制代碼

          image

          這樣,就可以實現,基于整塊的內容的溢出省略了。完整的 Demo,你可以戳這里:

          CodePen Demo - 整塊超長溢出打點省略

          問題二:iOS 不支持整塊超長溢出打點省略

          然而,上述方案并非完美的。經過實測,上述方案在 iOSSafari 下,沒能生效,表現為這樣:

          image

          查看規范 - CSS Basic User Interface Module Level 3 - text-overflow,究其原因,在于 text-overflow 只能對內聯元素進行打點省略。(Chrome 對此可能做了一些優化,所以上述非 iOS 和 Safari 的場景是正常的)

          所以猜測是因為經過了 display: inline-block 的轉化后,已經不再是嚴格意義上的內聯元素了。

          解決方案,使用多行省略替代單行省略

          當然,這里經過試驗后,發現還是有解的,我們在開頭還提到了一種多行省略的方案,我們將多行省略的代碼替換單行省略,只是行數 -webkit-line-clamp: 2 改成一行即可 -webkit-line-clamp: 1。

          .person-card__desc {
              width: 200px;
              white-space: normal;
              overflow : hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
          }
          .person-card__desc span {
              display: inline-block;
          }
          復制代碼

          這樣,在 iOS/Safari 下也能完美實現整塊的超長打點省略:

          image

          CodePen Demo -- iOS 下的整塊超長溢出打點省略方案

          值得注意的是,在使用 -webkit-line-clamp 的方案的時候,一定要配合 white-space: normal 允許換行,而不是不換行。這一點,非常重要。

          這樣,我們就實現了全兼容的整塊的超長打點省略了。

          當然, -webkit-line-clamp 本身也是存在一定的兼容性問題的,實際使用的時候還需要具體去取舍。


          作者:chokcoco
          鏈接:https://juejin.cn/post/6938583040469762055
          來源:掘金
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。
          相關標簽
          免費獲取專屬 《策劃方案 》及報價
          免費體驗我們的業務系統、OA系統、在線教育、電商系統、智慧辦公等產品定制化方案,助力您的信息化發展之路
          即時交流
          在線咨詢 電話咨詢
          在線咨詢
          產品經理

          一對一產品經理

          180 8812 7777
          電話咨詢

          電話咨詢

          0871-6718 6978
          到訪面聊
          返回頂部
          亚洲欧美日韩综合久久久久|免费特黄一级欧美大片久久网 S色|国产Av综合AⅤ|欧美A片在线看一区|色欲综合欧美久久久