文字溢出时如何使溢出部分显示为 ...

来源：互联网发布：淘宝卖家怎样包运费险编辑：程序博客网时间：2024/05/16 09:38

css方式：

单行溢出

<!DOCTYPE html><html><head> <meta charset="utf-8"><title>text-overflow</title><style type="text/css">.test_demo{    text-overflow:ellipsis;//值为clip表示剪切，ellipsis时为显示省略号    overflow:hidden;     white-space:nowrap;     width:200px;     background:#ccc;}</style></head> <body><div class="test_demo">  超酷的IT技术学习平台（我是省略号）</div></body></html>

这里写图片描述

同时，word-wrap也可以用来设置文本行为，当前行超过指定容器的边界时是否断开转行。关于word-wrap:break-word和word-break:break-all，可以看这个网址，很详细：你真的了解word-wrap和word-break的区别吗？

多行溢出
针对webkit内核的浏览器以及Opera浏览器：

<!DOCTYPE html><html><head> <meta charset="utf-8"><title>text-overflow</title><style type="text/css">.test_demo{     text-overflow:ellipsis;      overflow:hidden;     width:200px; //指定宽度    background:#ccc;      display:-webkit-box;      -webkit-box-orient:vertical;      -webkit-line-clamp:3; //指定显示多少行}</style></head> <body><div class="test_demo">  超酷的IT技术学习平台（我是省略号术学习平台（我是省略号我是省略号术学习平台（我是省略我是省略号术学习平台（我是省略</div></body></html>

这里写图片描述
对于其他浏览器：比较靠谱简单的做法就是设置相对定位的容器高度，用包含省略号(…)的元素模拟实现

p {　　position: relative;　　line-height: 1.4em;　　height: 4.2em;　　overflow: hidden;}p::after {　　content: "...";　　font-weight: bold;　　position: absolute;　　bottom: 0;　　right: 0;　　padding: 0 20px 1px 45px;　　background: url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;}

这里注意几点：

height高度正好是line-height的3倍；

结束的省略好用了半透明的png做了减淡的效果，或者设置背景颜色；

IE6-7不显示content内容，所以要兼容IE6-7可以是在内容中加入一个标签，比如用…去模拟；

要支持IE8，需要将::after替换成:after；

js插件方式：

更为好用的是使用jQuery插件-jQuery.dotdotdot:

$('.news-left-text').dotdotdot();//先要引入jquery.dotdotdot.js，然后选择文本段落，使用dotdotdot方法

0 0