单行文本:
overflow: hidden; text-overflow:ellipsis; white-space: nowrap;
多行文本:
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /*设置行数,第二行省略号*/ overflow: hidden;
文本溢出解决办法:
.nowrap{white-space:nowrap;} /* 允许单词内断句,首先会尝试挪到下一行,看看下一行的宽度够不够,不够的话就进行单词内的断句 */ .breakword{word-wrap: break-word;} /* 断句时,不会把长单词挪到下一行,而是直接进行单词内的断句 */ .breakAll{word-break:break-all;} /* 超出部分显示省略号 */ .ellipsis{text-overflow:ellipsis;overflow:hidden;
版权声明:《 [CSS]实现单/多行文本溢出显示省略号 》为DYBOY原创文章,转载请注明出处!
最后编辑:2018-7-25 09:07:21