DYBOY's Blog

[CSS]实现单/多行文本溢出显示省略号

单行文本:

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原创文章未经允许不得转载。

 DYBOY
 作者签名:安全从业者,爱好安全产品开发,渗透测试,Web漏洞研究

发表评论:

用心评论~

TOP
Powered by Emlog | Theme:Monkey by DYBOY
渝ICP备16008772号
sitemap