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

时间:2020-12-27 21:40:18

文本超出显示省略号:

定容器宽度

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;