用css实现文本溢出 超出部分隐藏显示省略号

可以用JQuery插件更好的实现文本溢出隐藏效果，可以访问：jQuery.dotdotdot多行文本省略号插件的使用方法

在CSS3中可以使用 text-overflow 对文本溢出进行处理：

clip :（默认值），文本溢出部分裁切。

ellipsis  : 溢出显示 ...
tip : 设置 ellipsis 时需将给元素设置 overflow: hidden; 和 white-space: nowrap; ，仅限于单行文本溢出。

代码如下：

.page1{
        width: 300px;
        height: 16px;
        border: 1px solid cyan;
        line-height: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space:nowrap;
}

WebKit内核的浏览器可以设置 -webkit-line-clamp: number; 实现在第几行末尾显示省略号。

对应的firefox可以使用 -moz-appearance 属性。

代码如下：

.page2{
        width: 300px;
        height: 65px;
        border: 1px solid cyan;
        overflow: hidden;
        /*line-height: 15px;*/
        text-overflow: ellipsis;
        display: -webkit-box;
        /*重新定义-webkit私有盒模型*/
        -webkit-box-orient: vertical;
        /*内容之间的排列顺序，vertical垂直方向排列*/
        -webkit-line-clamp: 3;
        /*在第几行末尾显示省略号...*/
        word-break: break-all;
}

-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

必须结合 display: -webkit-box; 和 -webkit-box-orient 属性。

display: -webkit-box; 将对象作为弹性伸缩盒子模型显示 。

-webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式 vertical 是代表垂直排列。

word-break: break-all; 规定自动换行的处理方法。normal （浏览器默认的换行规则）| break-all （允许在单词内换行）| keep-all （只能在半角空格或连字符处换行）;

未经允许不得转载：前端资源网 - w3h5 » 用css实现文本溢出 超出部分隐藏显示省略号