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;