900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 文本超出显示省略号/数字英文字母折行有关css 属性/显示两行 第二行省略号显示css方法...

文本超出显示省略号/数字英文字母折行有关css 属性/显示两行 第二行省略号显示css方法...

时间:2023-12-08 17:11:06

相关推荐

文本超出显示省略号/数字英文字母折行有关css 属性/显示两行 第二行省略号显示css方法...

文本超出显示省略号:

定容器宽度

overflow: hidden;

text-overflow: ellipsis; 文本超出显示省略号

white-space:nowrap; 强制文本不换行

折行

word-break:break-all; 英文单词会分开折行

word-wrap:break-word;英文单词完整处折行

另拓展:

word-spacing :5px; 单词/字符之间间隔距离

white-space是字符是否换行显示的(一般用强制不换行nowrap)。

------------ 骚气分割线 ----------------

截取字符串之—— 第二行显示省略号(css方法)

需求:产品介绍在第二行的时候才显示省略号,而不是第一行超出马上就出现省略号(图例:京东H5网站产品介绍)

css代码:

overflow:hidden;

text-overflow: ellipsis;//显示省略号

display:-webkit-box;

-webkit-line-clamp:2;//块元素显示的文本行数

-webkit-box-orient:vertical;

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