第一句子网 - 唯美句子、句子迷、好句子大全
第一句子网 > css怎么让多余文字显示省略号

css怎么让多余文字显示省略号

时间:2020-06-15 09:48:53

相关推荐

css怎么让多余文字显示省略号

如果只显示一行,则可以使用以下方法:

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;

如果需要显示多行,在需要设置的元素style中添加以下代码:

word-break: break-all;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 2;

overflow: hidden;

只显示两行:

overflow: hidden; //超出隐藏

text-overflow: ellipsis; //超出使用省略号

display: -webkit-box;

-webkit-line-clamp: 2; //第几行

-webkit-box-orient: vertical;

width: 192px; //根据需要自定义设置

height: 60px; //根据文字高度自定义设置为两行行高

(注意:有时添加在嵌入样式中不生效,需要添加在行内样式中)

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。