首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JS控制文字只显示两行,超出部分显示省略号

由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案。...第一步:依次引入jquery.js+jquery.ellipsis.js+jquery.ellipsis.unobtrusive.js。...(1)jquery.js源代码下载  http://jquery.com/ (2)jquery.ellipsis.js   源代码 可以通过该部分修改默认的行数,修改row的值即可。...options.callback.call(this); }); return this; }; }) (jQuery); (3)jquery.ellipsis.unobtrusive.js...; 第二步:需要一个装载内容的容器,并在其上添加属性data-toggle="popover",data-ellipsis="true",data-toggle的值可以定义成其他的值,只需后续与调用的js

4.2K40
您找到你想要的搜索结果了吗?
是的
没有找到

CSS控制文字,超出部分显示省略号

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。...但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。 接下来重点说一说多行文本溢出显示省略号,如下。...适用范围: 该方法适用范围广,但文字未超出行的情况下也会出现省略号,可结合js优化该方法。 注: 将height设置为line-height的整数倍,防止超出的文字露出。...webkit-box-orient: vertical;     }  将行高和最大行高设置为一样的值,-webkit-line-clamp: 1,限制行数,这样就可以定义超过一行自动隐藏的效果了;设置超过两行自动隐藏是效果...,line-height和max-heinght成比例,-webkit-line-clamp设为2,这样就可以实现超过两行自动隐藏多余部分的效果了:代码和效果图如下: ?

3.2K20

区区省略号竟有大作为...

1、省略号=“后继选择” 我印象中第一次看到省略号是在 Windows 3.1 中,那还是我的第一台电脑。...2、省略号=”在这里打字“ 在近些年开始,陆续诞生了很多产品使用省略号来代表文本域,而现在已然流行开来。...心理效应:传统上,一个省略号代表着省略词组/语句的一部分,也就是说有省略号的地方其实应该是有文字的。在文本域中使用省略号则在某种程度上,能够刺激你在空白部分进行文本输入。...随着现在的设计师们越来越强调简约的设计,相信省略号的这一用法会越来越普及开来。 4、省略号=“稍等片刻” 省略号另外一个常见的用法就是告诉用户当前动作正在执行中,比如“加载中...“、”连接中..."...小身板大作为 现在,你已经看到了有关省略号的多种不同用法,那你赞同我说的省略号是最为牛逼的字符吗? 我是说,谁会想到区区一个省略号竟能有如此大的应用? 更多的用法等你来整理...

869130

CSS3进阶整理

属性的值 scroll 内容会被修剪,浏览器会显示滚动条以查看超出内容 auto 浏览器定夺,如果内容被修剪,就会显示滚动条 3.文本溢出省略 text-overflow 我们的目的是将超出内容省略,并用省略号表示...ellipsis:超出部分用省略号表示 多行文本超出省略 如果我们希望多行省略,即如实现,两行后超出省略,WebKit内核浏览器实现起来比较简单: /* 隐藏超出部分 */ overflow : hidden...; /* 文本超出就用省略号 */ text-overflow: ellipsis; /* 把对象作为弹性伸缩盒子模型显示 */ display: -webkit-box; /* WebKit内核的浏览器的私有属性...,设置文本超出2行就用省略号 */ -webkit-line-clamp: 2; /* WebKit内核的浏览器的私有属性,设置或检索伸缩盒对象的子元素的排列方式 */ -webkit-box-orient...而其他内核则需要使用js来完成

1K10
领券