网页之文本溢出显示省略号

浏览数：24 / 时间：2015年06月09日

1、单行文本溢出显示省略号的css写法

1 overflow:hidden;
2 text-overflow:ellipsis;
3 white-space:nowrap;/*不换行*/

2、多行文本显示省略号

　　这里根据应用场景来实现

1）Webkit浏览器或移动端页面

　　可以使用webkit的私有属性：-webkit-line-clamp（这个属性不属于css规范），该属性用来显示块元素显示的文本行数。要实现该效果，需要组合其他的Webkit属性。

常见结合的属性：　

display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。
text-overflow: ellipsis;，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本

例如：

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>多行文字溢出省略</title>
 6     <style>
 7         .text-contorl{
 8             display: -webkit-box;
 9             -webkit-box-orient:vertical;
10             -webkit-line-clamp:3;/*显示3行文字*/
11             text-overflow: ellipsis;
12             font-size: 16px;
13             border: 1px solid #ccc;
14             width: 500px;
15             max-height: 300px;
16             overflow: hidden;
17         }
18     </style>
19 </head>
20 <body>
21 <p class="text-contorl">
22     摘要: 之前公司是用flash做的这个网站，现在因为访问速度过慢或者别的原因，由我来用html5重新写过，排版布局和之前的都是一样的。网页总体需要实现以下功能：（1）背景图片轮播（2）文字动画的实现（3）导航条动画效果（4）设计图片的展示效果（不知道怎么写，其实我还没弄明白它的实现原理，差不多就是图片的无缝
23 </p>
24 </body>
25 </html>

运行效果

技术分享

　　2）跨浏览器兼容方案

比较靠谱的做法就是设置相对定位的容器高度，用包含省略号（...）的元素模拟实现

例如：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>多行文字溢出省略</title>
    <style>
        .text-contorl{          
            position: relative;
           line-height: 1.4em;
            height: 3.2em;
            overflow: hidden;
        }
        .text-contorl:after{
            content: "...";
            font-weight: bold;
            bottom: 0;
            right: 0;
            padding: 0;
           
        }
    </style>
</head>
<body>
<p class="text-contorl">
    摘要: 之前公司是用flash做的这个网站，现在因为访问速度过慢或者别的原因，由我来用html5重新写过4）设计图片的展示效果（不知道怎么写，其实我还没弄明白它的实现原理，差不多就是图片的无缝滚动。
</p>
</body>
</html>

运行效果

技术分享

这里需要注意的是：

height的高度需要设置正好是line-height的3倍（经过测试发现，如果height的值设置过小，省略号没有显示，所以可能需要按需调整）
结束的省略好用了半透明的png做了减淡的效果，或者设置背景颜色；
IE6-7不显示content内容，所以要兼容IE6-7可以是在内容中加入一个标签，比如用<span class="line-clamp">...</span>去模拟；
要支持IE8，需要将::after替换成:after；

参考来自：http://www.css88.com/archives/5206

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

网页之文本溢出显示省略号