text-overflow white-space word-break word-wrap word-spacing line-clamp 傻傻分不清楚0.0=>文本超出显示省略号/数字英文字母折行有关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;

 

posted @ 2018-12-20 10:41  yanye411325  阅读(455)  评论(0编辑  收藏  举报