文本超出显示省略号:
定容器宽度
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;