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

大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。

 代码如下 复制代码
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

但是这个属性并不支持多行文本溢出显示省略号,这里根据应用场景介绍几个方法来实现这样的效果。

WebKit浏览器或移动端的页面
在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ;注意:这是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。
常见结合属性:

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

这个属性比较合适WebKit浏览器或移动端(绝大部分是WebKit内核的)浏览器。

垮浏览器兼容的方案
比较靠谱简单的做法就是设置相对定位的容器高度,用包含省略号(…)的元素模拟实现;

例如:

 代码如下 复制代码
p {
    position:relative;
    line-height:1.4em;
    /* 3 times the line-height to show 3 lines */
    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;
}

看demo:

 


这里注意几点:

height高度真好是line-height的3倍;
结束的省略好用了半透明的png做了减淡的效果,或者设置背景颜色;
IE6-7不显示content内容,所以要兼容IE6-7可以是在内容中加入一个标签,比如用<span class="line-clamp">...</span>去模拟;
要支持IE8,需要将::after替换成:after;
JavaScript 方案
用js也可以根据上面的思路去模拟,实现也很简单,推荐几个做类似工作的成熟小工具:

1.Clamp.js
下载及文档地址:https://github.com/josephschmitt/Clamp.js
使用也非常简单:

 代码如下 复制代码
var module = document.getElementById("clamp-this-module");
$clamp(module, {clamp: 3});

DEMO:

 


2.jQuery插件-jQuery.dotdotdot
这个使用起来也很方便:

 代码如下 复制代码

$(document).ready(function() {
 $("#wrapper").dotdotdot({
  // configuration goes here
 });
});

时间: 2024-09-24 02:48:48

css实现多行文本溢出显示省略号(…)全攻略的相关文章

行文本溢出显示省略号(...)的方法

个人使用的方法 .ellipsis1 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .ellipsis2 { text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: verti

手写样式表:CSS语法全攻略(1)

css|攻略|样式表|语法 放弃可视化编辑器写CSS 如果有看上篇的例子的CSS时,你可能会问,我在DW中要怎样做才能有像下面这样的CSS呢? .test1,.test2 {color:Purple !important;color:blue;} 手写,在DW也有代码区,而且是有智能提示的,等于半手动写,本人一直用TopStyle,除了对中文的支持不是很好外,各方面都不错.在学C#的那段时间,发现VS.NET写CSS也很不错,就是有点大. 为什么不能用可视化编辑器写CSS呢?理由很简单,手写CS

css 单行文本溢出显示省略号解决办法

样式代码,四个属性都是必须的,并且宽度必须设在当前容器上,父容器定宽无效:  代码如下 复制代码 .box {  width: 200px;  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis; } 测试 IE6.IE7.IE8.IE9.Chrome.Firefox 均支持. 测试实例  代码如下 复制代码 <!DOCTYPE HTML> <html> <head>  <meta ch

CSS网页样式设计全攻略

一.使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则请参看<常用css缩写语法结见附>,这里就不展开描述. 二.明确定义单位,除非值为0 忘记定义尺寸的单位是CSS新手普遍的错误.在HTML中你可以只写width="100",但是在CSS中,你必须给一个准确的单位,比如: width:100px width:100em.只有两个例外情况可以不定义单位:行高和0值.除此以外,其他值都必须紧跟单位,注意,不要在数值和单位之间加空格. 三

如何用CSS实现多行文本的省略号显示

本文翻译自CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS,文中某些部分有些许改动,并添加译者的一些感想,请各位读者谅解. 合理的截断多行文本是件不容易的事情,我们通常采用几种方法解决: overflow: hidden直接隐藏多余的文本 text-overflow: ellipsis只适用于单行文本的处理 各种比较脆弱的javascript实现.之所以说这种实现比较脆弱是由于需要文本长度的变化时刻得到回流(relayout)

如何继续截取长文本显示省略号(多行)

记得第一篇博客写过单行文本溢出显示省略号,今天就来说说多行文本溢出怎么显示省略号吧 其实也是前些日子做移动端的页面接到这么个需求,本来以为这没法实现,同事跟我说-webkit-line-clamp属性可以,就去查了查,果然 Pc端基本不会有这种需求,因为这个方法兼容性太差,浏览器份额不是webkit占大头(特别是天朝),看前缀就知道只支持webkit内核,他属于webkit内部属性,和-webkit-text-size-adjust: none(这个Pc端已经不在支持,移动端还可以使用)类似,但

jQuery实现控制文字内容溢出用省略号(…)表示的方法_jquery

本文实例讲述了jQuery实现控制文字内容溢出用省略号(-)表示的方法.分享给大家供大家参考,具体如下: jQuery限制字符字数的方法 $(function(){ //限制字符个数 $(".text").each(function(){ var maxwidth=23; if($(this).text().length>maxwidth){ $(this).text($(this).text().substring(0,maxwidth)); $(this).html($(th

用CSS实现标题过长部分用省略号显示

使用方法:在CSS中同时应用width=""; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;才能达到效果. width="";定义显示宽度 overflow:hidden; 溢出隐藏 text-overflow:ellipsis;省略号显示溢出文本内容 white-space:nowrap; 强制文本在一行内显示 用width指它好宽度.overflow:hidden;将超出的内容隐藏就行了

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

测试浏览器: IE6/7/8/9.opera12.02.firefox15.0.1.chrome  代码如下 复制代码 <p style="width:200px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">省略我吧 省略我吧! 省略我吧!省略我! </p> 如果我们要给p标签定义text-overflow:ellipsis就可以这么写:  代码如下 复制代码 p {