解决多行文本溢出加省略号的兼容性

最新推荐文章于 2022-11-14 16:41:47 发布

weixin_34159110

最新推荐文章于 2022-11-14 16:41:47 发布

阅读量167

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000008461332

版权

自己开发的一款jQuery插件，为了解决多行结尾处添加省略号的兼容性问题。

GitHub: https://github.com/jesseNam/iClamp.js

如何使用这个插件？

<head>
  <script src="jquery.js" type="text/javascript"></script>
  <script src="iclamp.js" type="text/javascript"></script>
</head>

例子

为需要添加省略号的元素添加一个类名 clamp-ellipsis：

<div class="container">
  <p class="clamp-ellipsis">Lorem Ipsum is simply dummy text.</p>
</div>

然后使用该插件。

$(document).ready(function() {
  var $container = $('.container');
  $container.clamp({clamp: 4});
});

参数

clamp (Number). 这个参数决定需要显示的行数。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34159110

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

纯CSS实现多行文本溢出显示省略号（兼容不同浏览器）

c11073138的博客

09-28

4925

1、单行文本溢出显示省略号 单行文本溢出显示省略号比较简单，设置white-space: nowrap避免换行，再设置text-overflow: ellipse即可。 <style> .single-line { width: 200px; line-height: 1.4; white-space: nowrap; overflow: hidden...

CSS实现单行、多行文本溢出显示省略号（…），且无兼容性问题

艾丽的博客

03-04

397

CSS实现单行、多行文本溢出显示省略号（…）且无兼容性问题

参与评论您还未登录，请先登录后发表或查看评论

css多行文本溢出（考虑兼容）

Beauty_zhang666的博客

04-20

863

基础：css单行文本溢出（4个属性） .box { width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 不考虑兼容(safari, chrome等，见拓展)的css多行文本溢出（5个属性） .box { width: 200px; overflow: hidden; ...

html 文本溢出兼容,CSS - 纯css实现多行文本溢出省略（兼容所有浏览器）

weixin_42696333的博客

06-27

422

前言多行文本超出高度限制出现省略号 , 移动端多为webkit内核的 , 有扩展属性-webkit-line-clamp , 但并不是CSS规范中的属性 , PC端往往要借助js去实现这一效果，但麻烦且不是很靠谱，今天就用纯CSS来实现一个完全兼容的多行省略。正文一、webkit内核的实现-webkit-line-clamp设置块元素包含的文本行数；display: -webkit-box设置块元...

实现多行显示省略号和兼容的解决办法

weixin_30657999的博客

06-20

兼容的解决办法：http://www.css88.com/archives/5206#more-5206 word-break:break-all; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; 转载于:https://www.cnbl...

webkit浏览器下多行显示，有省略号效果

Bao82527的博客

08-02

185

多行显示情况 display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; 除了上述，还有其他的解决方法，但要兼容其他浏览器，还是比较麻烦的可以通过设置高度来解决。另外，刚刚测试了一种方法: span{ width:112...

css超出两行显示省略号

motor_tang的博客

07-17

1559

超出两行显示省略号1. css写法只对webkit内核的浏览器好用, 对safari浏览器有兼容2. css超出两行显示省略号(个人写法) 1. css写法只对webkit内核的浏览器好用, 对safari浏览器有兼容 .demo { text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis;...

移动端的text-overflow多行文本溢出显示省略号(…)

12-10

综上所述，实现移动端多行文本溢出显示省略号的方法多种多样，可以根据项目需求和浏览器兼容性选择适合的方案。对于WebKit浏览器，`-webkit-line-clamp`是一个快速有效的选择，而针对非WebKit浏览器，则可采用CSS...

CSS实现单行、多行文本溢出显示省略号的实现方法

09-22

需要注意的是，当使用多行文本溢出显示省略号的技术时，要考虑到不同浏览器的支持情况，适当使用兼容性代码或后备方案。在实际开发中，设计师和前端开发者需要仔细权衡可用性和视觉效果，选择最适合项目需求的实现...

css多行文本溢出时出现省略号的示例

09-24

当文本内容过多，无法在指定的容器内完全展示时，可以使用CSS技术来实现多行文本溢出时显示省略号的效果。这既保持了设计的整洁性，又确保了主要内容的可读性。本文将介绍两种实现这一效果的方法。方法一：CSS技巧...

css多行文本溢出显示省略号 兼容ie

qq_35469137的博客

11-14

1111

兼容ie的写法目前没有特别好的纯样式可以兼容ie 我们就要考虑用js来处理。先来说一般写法兼容谷歌火狐不兼容ie。

CSS - 纯css实现多行文本溢出省略（兼容所有浏览器）

weixin_34087307的博客

04-01

2000

css 多行文本溢出显示省略号(…)全攻略

Code-lover's Learning Notes

07-23

5897

大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。overflow: hidden; text-overflow: ellipsis; white-space: nowrap;但是这个属性并不支持多行文本溢出显示省略号，这里根据应用场景介绍几个方法来实现这样的效果。WebKit浏览器或移动端的页面在WebK

关于多行文本溢出容器时自动出现省略号无效：text-overflow

hacker9401的博客

12-26

834

首先容器一定要有固定的宽高，以下是css代码： display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; display: -webkit-box是必须要声明的，否则会无效，overflow: hidden表示超出容器部分隐藏，text-over...

【Flutter】四十二、Flutter中文字过长显示省略号

MAXLZ的博客

11-08

4530

Text( item.name, overflow: TextOverflow.ellipsis, maxLines: 2, style: TextStyle( fontSize: 13.0 ), ) 效果：

CSS实现单行、多行文本溢出显示省略号（…）