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

資訊專欄INFORMATION COLUMN

你真的知道什么情況下text-overflow:ellipsis才會(huì)生效嗎？

meislzhua / 2692人閱讀

摘要：但是究竟什么情況才會(huì)觸發(fā)文本溢出，大部分人肯定沒有探究過。也不會(huì)出問題，但是誰也沒想到當(dāng)時(shí)，居然生效了。使用對(duì)象截取片段后獲取到的對(duì)象的才是內(nèi)容的真正寬度。并不是內(nèi)容區(qū)域的真正寬度也就是說當(dāng)加是應(yīng)為成立時(shí)才是觸發(fā)真正的條件。

text-overflow:ellipsis是我們用來設(shè)置文本溢出的一個(gè)常用屬性。

但是究竟什么情況才會(huì)觸發(fā)文本溢出，大部分人肯定沒有探究過。
我以前也沒有注意，反正這樣的css樣式一把梭，溢出了就點(diǎn)點(diǎn)點(diǎn)

width: 100px;
overflow: hidden;
text-overflow: ellipsis;

本來是沒啥問題的，直到測(cè)試給我提了一個(gè)bug：表格內(nèi)的文字超長(zhǎng)隱藏后鼠標(biāo)hover沒有懸浮提示

我一個(gè)開始不信，我用的element-UI還會(huì)出問題？
不過看完源碼以后果然翻車了

const cellChild = event.target.querySelector(".cell");
if (hasClass(cellChild, "el-tooltip") && cellChild.scrollWidth > cellChild.offsetWidth && this.$refs.tooltip) {
//執(zhí)行懸浮窗顯示操作
}

問題就出在了cellChild.scrollWidth > cellChild.offsetWidth
為了方便控制元素寬度，設(shè)置了box-sizing: border-box;
按照理解scrollWidth是內(nèi)容的寬度，offsetWidth是容器的寬度。
也不會(huì)出問題，但是誰也沒想到當(dāng)scrollWidth===offsetWidth時(shí)，
text-overflow:ellipsis居然生效了。
重現(xiàn)效果：
http://jsfiddle.net/f0dmkkh8/1/

我天真的以為cellChild.scrollWidth >= cellChild.offsetWidth不就完事了。

知道我看了element-UI最新的代碼才發(fā)現(xiàn)自己錯(cuò)了，原來scrollWidth超出offsetWidth并不是text-overflow:ellipsis觸發(fā)的條件。

const range = document.createRange();
      range.setStart(cellChild, 0);
      range.setEnd(cellChild, cellChild.childNodes.length);
      const rangeWidth = range.getBoundingClientRect().width;
      const padding = (parseInt(getStyle(cellChild, "paddingLeft"), 10) || 0) +
        (parseInt(getStyle(cellChild, "paddingRight"), 10) || 0);

使用range對(duì)象截取dom片段后獲取到的DOMRect對(duì)象的width才是內(nèi)容的真正寬度。（scrollWidth并不是內(nèi)容區(qū)域的真正寬度）

也就是說當(dāng)

//加padding是應(yīng)為box-sizing:border-box;
rangeWidth + padding > cellChild.offsetWidth

成立時(shí)才是觸發(fā)text-overflow:ellipsis真正的條件。

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

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

相關(guān)文章

  • CSS 文本控制

    摘要：學(xué)習(xí)一些文本控制的屬性，防止做傻事。是的升級(jí)版，當(dāng)單行文本過長(zhǎng)，超過文本邊界時(shí)自動(dòng)換行。否則，文本仍然左對(duì)齊。 one more time one more chance. 一歩重頭學(xué)前端, css入門。 學(xué)習(xí)一些 CSS 文本控制的屬性，防止做傻事。請(qǐng)大家對(duì)照下面列表檢驗(yàn)下： 會(huì)的、不會(huì)的、似懂非懂的。筆者是一個(gè)也不會(huì)。 white-space text-overflow: ell...

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

  • 自適應(yīng)寬度元素單行文本省略用法探究

    摘要：?jiǎn)涡形谋臼÷院驮丶捌涓冈氐膶傩远紵o關(guān)元素或?yàn)樵貎?nèi)單行文本省略，需要給元素或?yàn)樵靥砑訕邮綖樵氐淖釉厝绻亲赃m應(yīng)寬度時(shí)，內(nèi)的子元素實(shí)現(xiàn)單行文本省略，需要給添加樣式單行文本省略是現(xiàn)代網(wǎng)頁設(shè)計(jì)中非常常用的技術(shù)，幾乎每個(gè)站點(diǎn)都會(huì)用到。單行文本省略適用于顯示摘要信息的場(chǎng)景，如列表標(biāo)題、文章摘要等。在響應(yīng)式開發(fā)中，自適應(yīng)寬度元素單行文本省略容易失效不起作用，對(duì)網(wǎng)頁開發(fā)這造成困擾。因此，本文將要...

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

  • css超過一定長(zhǎng)度顯示點(diǎn)點(diǎn)

    摘要：用來限制在一個(gè)塊元素顯示的文本的行數(shù)。為了實(shí)現(xiàn)該效果，它需要組合其他的屬性。常見結(jié)合屬性必須結(jié)合的屬性，將對(duì)象作為彈性伸縮盒子模型顯示。，可以用來多行文本的情況下，用省略號(hào)隱藏超出范圍的文本。 Text-overflow: clip | ellipsis作用:文本溢出簡(jiǎn)單的裁切 Text-overflow: clip 表示不顯示省略標(biāo)記（...），只是簡(jiǎn)單的裁切，需要配合overflo...

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

  • 超過固定寬度(或行數(shù))顯示...(或省略)

    摘要：對(duì)于一些比較長(zhǎng)的文本做限制，不顯示，或者顯示省略號(hào)。超出固定長(zhǎng)度顯示設(shè)置文字不換行這個(gè)是設(shè)置隱藏的。當(dāng)前是顯示省略號(hào)。直接省略是根據(jù)不同標(biāo)簽值，有的不用加。超出固定行數(shù)顯示超出固定行數(shù)。或者本地生效了，或者打包到服務(wù)器上就不生效了。 作為前端經(jīng)常遇到的一個(gè)需求。對(duì)于一些比較長(zhǎng)的文本做限制，不顯示，或者顯示省略號(hào)。今天特意整理了一下，做個(gè)備忘。 1.超出固定長(zhǎng)度顯示... .class{...

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

  • 超過固定寬度(或行數(shù))顯示...(或省略)

    摘要：對(duì)于一些比較長(zhǎng)的文本做限制，不顯示，或者顯示省略號(hào)。超出固定長(zhǎng)度顯示設(shè)置文字不換行這個(gè)是設(shè)置隱藏的。當(dāng)前是顯示省略號(hào)。直接省略是根據(jù)不同標(biāo)簽值，有的不用加。超出固定行數(shù)顯示超出固定行數(shù)。或者本地生效了，或者打包到服務(wù)器上就不生效了。 作為前端經(jīng)常遇到的一個(gè)需求。對(duì)于一些比較長(zhǎng)的文本做限制，不顯示，或者顯示省略號(hào)。今天特意整理了一下，做個(gè)備忘。 1.超出固定長(zhǎng)度顯示... .class{...

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

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

0條評(píng)論

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