多行文本溢出省略ellipsis...css/scss/js方法全总结

最新推荐文章于 2024-10-02 09:25:25 发布
原创 最新推荐文章于 2024-10-02 09:25:25 发布 · 1.7k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ellipsis # text-overflow # line-clamp

本文总结了多种多行文本溢出时的截断方法，包括Webkit-line-clamp属性、Text-overflow: -o-ellipsis-lastline、JavaScript方法、纯CSS跨浏览器方案及纯SCSS解决方案。各方法的优缺点、实现原理及实际应用示例均有详细阐述。

多行显示并在最后一行截断文字？

---text-overflow基本知识请看上篇文章：text-overflow: ellipsis;什么时候可能不生效？

单行文字我们为了能够截断文字，使用了

white-space: nowrap; // 强制文本在一行显示

如果我确实有多行并在最后一行截断文字显示的需求呢？怎么实现？multiline例子图片

方法1 -Webkit-line-clamp property

优点: 最简单的方法缺点: 但是很遗憾，它不支持跨浏览器（在Firefox和Internet Explorer中不起作用）。

-webkit-line-clamp CSS 属性 可以把 块容器 中的内容限制为指定的行数.

它只有在 display 属性设置成 -webkit-box 或者 -webkit-inline-box 并且 -webkit-box-orient 属性设置成 vertical时才有效果

最低0.47元/天 解锁文章
js:判断文本溢出隐藏生效text-overflow: ellipsis
彭世瑜的博客
11-22 3933
效果展示 参数汇总看上图，不难发现，文字有超出的条件是 可以通过js判断是否生效，参考element-ui的代码实现 https://github.com/ElemeFE/element/blob/dev/packages/table/src/table-body.js#L241它多了一个判断 完整代码
Ellipsis.js-用于处理复杂多行省略号的纯Javascript库-JavaScript开发
05-26
Ellipsis.js Ellipsis.js是一个纯Javascript库，用于在一些复杂的DOM元素（例如多行div或带有子元素（链接，跨度等）的元素）上添加省略号。 该库是完全响应式的，可在所有主要版本上使用。Ellipsis.js Ellipsis.js是一个纯Javascript库，用于在一些复杂的DOM元素（例如多行div或带有子元素（链接，span等）的元素）上添加省略号。 该库具有完全响应能力，可在所有主要浏览器上使用，并尝试高度可配置。 它也非常轻巧，缩小后的大小约为4kb。 演示：https://glinford.github.io/ellipsis.js/安装：Bower bower安装ellipsis.js NPM npm安装ellipsis.js或…git clone https://github.com/glinfo
Js文本溢出自动添加省略号ellipsis
weixin_34054866的博客
09-21 210
原文： ellipsis: function(value, len, word) { //判断value有没有超过指定长度 if (value && value.length > len) { //word的作用就是尽量不让一个完整的单词被部分省略 if (word) { ...
scss--控制几行内溢出隐藏并显示省略号
web_sea 的博客
01-14 1455
使用的是scss语法 $line:2;//行数 这里是设置默认值、也可以调用的时候输入，常用于商品标题设置 @mixin overflow_omit($line:2) { -webkit-box-orient: vertical; text-overflow: ellipsis; -webkit-line-clamp: $line; overflow: hidden; display: -webkit-box; } ...
学习记录：JS文本溢出自动添加省略号ellipsis
weixin_44845483的博客
07-05 460
定义的样式函数如下： 引用方法如下：
用scss写一个公共style.里面包含单行溢出或者多行溢出显示省略号
最新发布
07-10
**多行文本溢出省略号（WebKit内核浏览器）** ```scss // 定义多行溢出省略号样式（支持行数控制） @mixin ellipsis-multiline($lines: 2) { display: -webkit-box; -webkit-line-clamp: $lines; // 限制显示的...
学习css文本溢出显示省略号？
weixin_47450807的博客
04-24 1880
一、写在前面 今天携程面试，问题是这样的有一个span标签，其宽度为100px,我们需要给其设置文本，并且让其单行显示，超出部分使用省略号表示，当我们鼠标悬停在说上面的时候，然后再进行展示全部文本。但是我不会，很尴尬。下面重新整理一下。 <!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content
CSS实现文本超出隐藏并显示省略号
everfoot的博客
10-02 3305
通过结合使用和这三个CSS属性，我们可以轻松地在CSS中实现文本超出隐藏并显示省略号的效果。这一技巧在处理长文本、保持页面整洁和美观方面非常有用。希望本文的介绍和示例能帮助你更好地理解和应用这一技术。
mlellipsis.js-实现多行文字溢出隐藏显示省略号
923723914
10-12 296
超出容器部分文字做省略，这是基本写前端代码都会遇到的问题。 某些位置为了表现完美不额外加滚动条，都会要求多出的部分作省略，例如文章简介”今天天气真的好…”，文本之后部分点击进入详情页才能看到，超出多余的用”…”省略。 然而，一般这些简介都是用后台语言去作处理，例如只显示前140字等，如何用前端代码实现？ 你会想到用css的overflow:hidden;white-space:nowra...
Ellipsisjs纯Javascript库来处理多行省略号
08-12
Ellipsis.js - 纯Javascript库来处理多行省略号
text-ellipsis:如果太长，请剪掉一根绳子
05-08
文字省略号 如果太长，请剪掉一根绳子 为什么 您总是想切断长字符串。 安装 $ npm install --save text-ellipsis 用法 var ellipsis = require ( 'text-ellipsis' ) ; var short = ellipsis ( 'a very long text' , 10 ) ; console . log ( short ) ; // "a very ..." var short = ellipsis ( 'a very long text' , 10 , { side : 'start' } ) ; console . log ( short ) ; // "...ng text" var short = ellipsis ( 'a very long text' , 10 , { ellipsis : ' END' }
vue + scss,文本超过多行需要省略号，不起作用
qq_34164814的博客
11-12 1733
正常设置超过多行，显示省略号（仅部分浏览器支持） overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; 结果这样设置了，在vue+scss中不起作用，原因是，在scss编译的过程中，会去掉 -webkit-box-orient: vertical；的属性，需要在代码中添加 word-wrap: break-word; wo
CSS/Js文本溢出自动添加省略号ellipsis
手牵手科技
03-30 833
CSS文本溢出省略号 text-overflow:ellipsis ext-overflow是一个比较特殊的属性，W3C早前的文档中(目前的文档中没有包含text-overflow属性，FML!)对其的定义是: Name: text-overflow-mode Value: clip | ellipsis | ellipsis-word clip : 　不显示省略标记(…)，而是简单的裁切 ell...
多行文本超出时显示省略号----jquery.ellipsis.js
红豆技术栈
02-23 4476
jquery.ellipsis.js使用
JS如何判断文字被ellipsis了？
2401_83384536的博客
06-24 1111
如果想要文本超出宽度后用省略号省略，只需要加上以下的 css 就行了。如果我们想要当文本被省略的时候，也就是当文本超出指定的宽度后，鼠标悬浮在文本上面才展示popper，应该怎么实现呢？CSS帮我们搞定了省略，但是 JS 并不知道文本什么时候被省略了，所以我们得通过JS来计算。接下来，我将介绍几种方法来实现 JS 计算省略。我发现表格组件已经实现了这个功能，所以就先来学习一下它的源码。
js， ellipsis属性， 超出宽度自动省略... ， 并且显示2行
zss_base的博客
06-05 253
【代码】js， ellipsis属性， 超出宽度自动省略... ， 并且显示2行。
检测文本是否应用了text-ellipsis省略样式
justforuse的博客
10-23 1485
css提供了可以省略过长文字的样式：text-ellipsis: hidden，那么如何检测文本是否被省略呢？ 如果有一个伪类，类似:placeholder-shown，比如：:ellipsis-shown，但是很现实并没有这个伪类，所以要想检测就必须使用js了。 所以只要比对文本实际长度和显示长度是否一致就可以知道是否被省略了，DOM提供了两个属性分别对应了两个长度：scrollWidth和o...
[CSS3] Text ellipsis
weixin_34378045的博客
05-09 124
Link: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow   div{ white-space: nowrap; text-overflow: ellipsis; }   .truncate { width: 250px; wh...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值