首页 > 其他 > 详细

文本出现省略号

时间:2018-04-11 11:03:44      阅读:215      评论:0      收藏:0      [点我收藏+]
一行的时候
.text1 {
        width:200px;
        overflow:hidden;
        text-overflow:ellipsis;                  
        -o-text-overflow:ellipsis;
        -webkit-text-overflow:ellipsis;
        -moz-text-overflow:ellipsis;
        white-space:nowrap;
}
 
规定段落中的文本不进行换行:
p
{white-space: nowrap}
 
可能的值
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符
inherit 规定应该从父元素继承 white-space 属性的值。
 
技术分享图片
二行的时候
.text2 {
        width:200px;
        word-break:break-all;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
}
 
 
 
技术分享图片

文本出现省略号

原文:https://www.cnblogs.com/quitpoison/p/8794268.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!