css3实现超出指定文本以省略号显示效果

责编:menVScode 2017-10-31 10:43 阅读(1008)

css3实现超出指定文本以省略号显示效果:一种是单行显示省略号;另一种是自己可以控制几行,最后一行末尾才显示省略号。

css样式

.text01 {
    width:200px;
    overflow:hidden;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
    -webkit-text-overflow:ellipsis;
    -moz-text-overflow:ellipsis;
    white-space:nowrap;
}
.text02 {
    width:200px;
    word-break:break-all;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

html代码

<p class="text01">从最新显示的消息看,一加应该不出意外会在11月16日宣布他们的全面屏新机,其也会使用目前火热的18:9全面屏,就是三星供应的那块6英寸OLED屏。</p>
<p class="text02">从最新显示的消息看,一加应该不出意外会在11月16日宣布他们的全面屏新机,其也会使用目前火热的18:9全面屏,就是三星供应的那块6英寸OLED屏。</p>

效果图:

QQ截图20171031104504


第二种方式

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
word-break: break-all;
标签: css3 省略号
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码