# [css 文本两行显示，超出省略号表示](https://www.cnblogs.com/xiaosuibu/p/8196067.html) ** 重点：text-overflow: ellipsis;只对display：inline；起作用** 1. `例子：` 2. `<span class="a">我说说<b class="b">打瞌睡党风建设打火机</b>说说色儿</span>` 1. `` `a{` `` 2. `   display:block/inline-block;` 1. width:100px; 3. overflow: hidden; 1. white-space: nowrap;  text-overflow: ellipsis; 4. `}` 5. b{ 6.    display:inline; //正确 7.    display：inline-block //错误，b标签里的字超出不能显示省略号（...） 8. } ** //一行** ``` 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; -webkit-box-orient: vertical; ``` 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。 实现方法： ~~~ overflow: hidden; text-overflow:ellipsis; white-space: nowrap; ~~~