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

meislzhua 發布于2019-08-30 15:55 / 2654人閱讀

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

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

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

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

本來是沒啥問題的，直到測試給我提了一個bug：表格內的文字超長隱藏后鼠標hover沒有懸浮提示

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

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

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

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

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

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對象截取dom片段后獲取到的DOMRect對象的width才是內容的真正寬度。（scrollWidth并不是內容區域的真正寬度）

也就是說當

//加padding是應為box-sizing:border-box;
rangeWidth + padding > cellChild.offsetWidth

成立時才是觸發text-overflow:ellipsis真正的條件。

GPU云服務器云服務器你知道你應該知道 webrtc什么情況下獲取不到ip 數據分析知道你

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117219.html

CSS 文本控制

摘要：學習一些文本控制的屬性，防止做傻事。是的升級版，當單行文本過長，超過文本邊界時自動換行。否則，文本仍然左對齊。 one more time one more chance. 一歩重頭學前端, css入門。學習一些 CSS 文本控制的屬性，防止做傻事。請大家對照下面列表檢驗下：會的、不會的、似懂非懂的。筆者是一個也不會。 white-space text-overflow: ell...

Taonce 2019-08-29 15:42 評論0 收藏0
自適應寬度元素單行文本省略用法探究

摘要：單行文本省略和元素及其父元素的屬性都無關元素或為元素內單行文本省略，需要給元素或為元素添加樣式為元素的子元素如果是自適應寬度時，內的子元素實現單行文本省略，需要給添加樣式單行文本省略是現代網頁設計中非常常用的技術，幾乎每個站點都會用到。單行文本省略適用于顯示摘要信息的場景，如列表標題、文章摘要等。在響應式開發中，自適應寬度元素單行文本省略容易失效不起作用，對網頁開發這造成困擾。因此，本文將要...

K_B_Z 2019-04-23 13:46 評論0 收藏0
css超過一定長度顯示點點

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

PumpkinDylan 2019-08-29 12:22 評論0 收藏0
超過固定寬度(或行數)顯示...(或省略)

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

zgbgx 2019-08-30 15:55 評論0 收藏0
超過固定寬度(或行數)顯示...(或省略)

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

Flink_China 2019-08-02 14:08 評論0 收藏0