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

abcd23212年前前端开发713

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。


实现方法:

overflow: hidden; 
text-overflow:ellipsis; 
white-space: nowrap;

但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。接下来重点说一说多行文本溢出显示省略号,如下。

实现方法:

display: -webkit-box; 
-webkit-box-orient: vertical; 
-webkit-line-clamp: 3; 
overflow: hidden;


标签: 文本溢出

相关文章

jq动画重复执行的解决方法

1. 在你的点击事件中加上一个判断,假设产生动画效果目标的是div这个节点,那么你要加上这个判断 它会确保你的动画只会在上一个动画结束后才能产生 ,可以保持动画的完整性,但是连续点击时会有反映迟钝的感...

图片垂直居中,宽高按比例缩放不变形

高度大于宽度,按高度来,宽度自动;反之宽度大于高度也一样.sbzs dl{ width:279px; height:238px; line-height:234...

a标签的为空链接和返回上一页的设置方法

a标签中的href值是一个地址,指示点击这个标签时,转向的地址。但是当使用a标签来做按钮,不需要跳转时,href值即为空。 我们需要使用以下两种方式:...

滚轮滚动时让div背景图片移动的相对缓慢

鼠标滚轮滚动时,这一个div的移动速度相对较慢,下面其他div内容能够追上并超越它。css代码:.banner { width: 100%; position:...

纯CSS解决锚点跳转偏移

能用css自然不想用js解决,因为在加载方面,css总是先加载,并且速度很快。.div{    position:relative;   &nbs...

JQ获取浏览器宽度,根据不同宽度给div赋值

var winWidth = $(window).width();     var winHeight =$...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。