你真的知道什么情况下text-overflow:ellipsis才会生效吗？

meislzhua 发布于2019-08-30 15:55 / 2658人阅读

摘要：但是究竟什么情况才会触发文本溢出，大部分人肯定没有探究过。也不会出问题，但是谁也没想到当时，居然生效了。使用对象截取片段后获取到的对象的才是内容的真正宽度。并不是内容区域的真正宽度也就是说当加是应为成立时才是触发真正的条件。

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 数据分析知道你

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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