# [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; ~~~