用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 属性。

001.png 用css实现文本溢出 超出部分隐藏显示省略号 经验总结

代码如下:

.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实现文本溢出 超出部分隐藏显示省略号

赞 (2)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)