span标签设置单行、多行文本超出显示省略号

span标签设置单行、多行文本超出显示省略号

span标签设置单行、多行文本超出显示省略号

重点:text-overflow: ellipsis只对display:inline起作用

例子:

<span class=“a”>中国电信与上海市政府<b class=“b”>在沪共同启动“共建千兆示范城市”建设</b>这标志着上海</span>

.a{
display:block/inline-block;
width:100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.b{
display:inline; //正确
display:inline-block //错误,b标签里的字超出不能显示省略号(…)
}

//一行
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
//两行
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
/* autoprefixer: ignore next */
-webkit-box-orient: vertical;

发布了1 篇原创文章 · 获赞 0 · 访问量 28
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览