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

資訊專欄INFORMATION COLUMN

判斷文本是否溢出/hover顯示全部

番茄西紅柿 / 2905人閱讀

摘要：前言在工作中我們經(jīng)常會(huì)遇到，文字過(guò)多，需要用省略號(hào)，并且鼠標(biāo)的時(shí)候還需要顯示全部的文字的需求。還記得的作用不就是第二步中確定是否溢出用的。方法二在標(biāo)簽內(nèi)部再包裹一個(gè)標(biāo)簽，標(biāo)簽在時(shí)顯示。

前言

在工作中我們經(jīng)常會(huì)遇到，文字過(guò)多，需要用省略號(hào)，并且鼠標(biāo)hover的時(shí)候 還需要 顯示全部的文字的需求。

正文

  1. 文字過(guò)多需要用省略號(hào)的實(shí)現(xiàn)：上代碼啦 
    .ellipsis {
      width: 100%;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
     display: inline-block //塊級(jí)標(biāo)簽不需要
}

     

  2.  如何得知這個(gè)是否溢出呢？關(guān)鍵詞：clientWidth 和scrollWidth: 代碼奉上：

    // 我是在react中實(shí)現(xiàn)

 componentDidMount () { // 在did mount 中判斷是否溢出
    const node = this.ref.current  // 判斷的dom節(jié)點(diǎn)，使用ref
    const clientWidth = node.clientWidth
    const scrollWidth = node.scrollWidth
    if (clientWidth < scrollWidth) {
      this.setState({    // 把是否溢出的狀態(tài)存在state中，之后從state中拿值使用
        overflow: true    
      })
    }
  }  // 在普通js中實(shí)現(xiàn)，方法一樣，取到dom，判斷clientWidth 和scrollWidth
  3. 判斷完溢出，一般會(huì)需要處理，我這里的需求是hover時(shí)候再顯示全部。方法兩種，第一，使用偽類，第二，包裹一個(gè)標(biāo)簽，該標(biāo)簽hover時(shí)候顯示。

 　　　　重點(diǎn)坑： 有省略號(hào)的標(biāo)簽，我們使用了overflow:hidden來(lái)實(shí)現(xiàn)了，那么這個(gè)就是一個(gè)BFC，hover時(shí)候顯示的提示框，超出bfc的就顯示不了了。。。

　　　　方法一 ： 偽類實(shí)現(xiàn)：代碼上html

<span className={`${styles.detail} ${styles.ellipsis}`} ref={this.departmentRef} data-customer={overflow ? department : null}>{department}span>

// 關(guān)注data-customer 屬性，這個(gè)屬性在有溢出時(shí)候賦值，無(wú)溢出時(shí)候?yàn)閚ull。  還記得ref的作用不？就是第二步中確定是否溢出用的。
.ellipsis { // 第一步溢出的代碼
          display: inline-block;  
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          width: 255px;
}
.ellipsis[data-customer]:hover::after { // 關(guān)鍵代碼，偽類實(shí)現(xiàn)
          content: attr(data-customer);
          position: absolute;
          background: #F2F2F2;
          border: 1px solid #E5E5E5;
          box-shadow: 0 2px 4px 0 rgba(56,62,71,0.10);
          border-radius: 2px;
          padding: 2px 6px;
          font-size: 13px;
          color: #202332;
          top:106px; // 設(shè)置位置
          left: 10px; // 設(shè)置位置
          max-width: 90%;
          word-break: break-word; // 如果一個(gè)單詞太長(zhǎng)，則截?cái)? CSS 屬性 word-break 指定了怎樣在單詞內(nèi)斷行。
          white-space: normal;// 可以換行  white-space CSS 屬性是用來(lái)設(shè)置如何處理元素中的空白。
}

 

    方法二：在hover標(biāo)簽A 內(nèi)部再包裹一個(gè)標(biāo)簽B，B標(biāo)簽在hoverA時(shí)顯示。代碼走你

<span ref={this.ref} style={{display: inline-block}} className={overflow ? overFlowText : }>
{tableTitle}
{overflow ? (<span className=overflowSpan>{tableTitle}span>) : null}
span>
// 關(guān)鍵代碼是那個(gè)三元~

 

.overflow{
   position: relative
}
.overflow .overflowSpan {
    display: none
}

.overflow:hover .overflowSpan{
   display: block;
   position: absolute;
   top: 10px;
   left: 0px;

}

參考鏈接： https://stackoverflow.com/questions/2011142/how-to-change-the-style-of-the-title-attribute-inside-an-anchor-tag

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

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

相關(guān)文章

  • text-overflow-文本溢出包含樣式設(shè)置

    摘要：需求該列展示文本的單元格寬度固定，文本超出部分顯示為，當(dāng)把鼠標(biāo)移到文字上時(shí)，展示完整信息。效果沒(méi)有獲得焦點(diǎn)時(shí)獲得焦點(diǎn)時(shí)另一種實(shí)現(xiàn)方案利用屬性部分必須必須必須部分如果您把光標(biāo)移動(dòng)到下面上，就能夠看到全部文本。 背景： 在列表中展示文本信息，但是有的文本信息過(guò)長(zhǎng)，大部分則較短，若是不加控制，完全顯示文本信息，列表會(huì)被撐開(kāi)，很不美觀。 需求： 該列展示文本的單元格寬度固定，文本超出部分顯示為...

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

  • 解決一行文本溢出隱藏點(diǎn)擊展開(kāi)之后全部顯示并自動(dòng)換行每行長(zhǎng)度一致問(wèn)題

    摘要：一行數(shù)據(jù)文本內(nèi)容太多，把頁(yè)面撐得很長(zhǎng)影響美觀。該方法可以實(shí)現(xiàn)當(dāng)一行文本內(nèi)容超過(guò)固定長(zhǎng)度后，收縮起來(lái)，顯示一個(gè)展開(kāi)按鈕，用戶一點(diǎn)擊后就顯示全部?jī)?nèi)容。 一行數(shù)據(jù)文本內(nèi)容太多，把頁(yè)面撐得很長(zhǎng)影響美觀。該方法可以實(shí)現(xiàn)當(dāng)一行文本內(nèi)容超過(guò)固定長(zhǎng)度后，收縮起來(lái)，顯示一個(gè)展開(kāi)按鈕，用戶一點(diǎn)擊后就顯示全部?jī)?nèi)容。當(dāng)然多行文本也同樣適用，（若是全部是中文也可以使用判斷判斷字符串長(zhǎng)度的方法，中文占用兩個(gè)字符，...

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

  • 解決一行文本溢出隱藏點(diǎn)擊展開(kāi)之后全部顯示并自動(dòng)換行每行長(zhǎng)度一致問(wèn)題

    摘要：一行數(shù)據(jù)文本內(nèi)容太多，把頁(yè)面撐得很長(zhǎng)影響美觀。該方法可以實(shí)現(xiàn)當(dāng)一行文本內(nèi)容超過(guò)固定長(zhǎng)度后，收縮起來(lái)，顯示一個(gè)展開(kāi)按鈕，用戶一點(diǎn)擊后就顯示全部?jī)?nèi)容。 一行數(shù)據(jù)文本內(nèi)容太多，把頁(yè)面撐得很長(zhǎng)影響美觀。該方法可以實(shí)現(xiàn)當(dāng)一行文本內(nèi)容超過(guò)固定長(zhǎng)度后，收縮起來(lái)，顯示一個(gè)展開(kāi)按鈕，用戶一點(diǎn)擊后就顯示全部?jī)?nèi)容。當(dāng)然多行文本也同樣適用，（若是全部是中文也可以使用判斷判斷字符串長(zhǎng)度的方法，中文占用兩個(gè)字符，...

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

  • 解決一行文本溢出隱藏點(diǎn)擊展開(kāi)之后全部顯示并自動(dòng)換行每行長(zhǎng)度一致問(wèn)題

    摘要：一行數(shù)據(jù)文本內(nèi)容太多，把頁(yè)面撐得很長(zhǎng)影響美觀。該方法可以實(shí)現(xiàn)當(dāng)一行文本內(nèi)容超過(guò)固定長(zhǎng)度后，收縮起來(lái)，顯示一個(gè)展開(kāi)按鈕，用戶一點(diǎn)擊后就顯示全部?jī)?nèi)容。 一行數(shù)據(jù)文本內(nèi)容太多，把頁(yè)面撐得很長(zhǎng)影響美觀。該方法可以實(shí)現(xiàn)當(dāng)一行文本內(nèi)容超過(guò)固定長(zhǎng)度后，收縮起來(lái)，顯示一個(gè)展開(kāi)按鈕，用戶一點(diǎn)擊后就顯示全部?jī)?nèi)容。當(dāng)然多行文本也同樣適用，（若是全部是中文也可以使用判斷判斷字符串長(zhǎng)度的方法，中文占用兩個(gè)字符，...

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

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

0條評(píng)論

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