css设置超出几行显示省略号（单行、多行）,兼容数字英文不换行问题，兼容中文字符隔空换行问题

1、单行文本超长显示省略号

/* css */
p{
    overflow: hidden;/*超出部分隐藏*/
    text-overflow:ellipsis;/* 超出部分显示省略号 */
    white-space: nowrap;/*规定段落中的文本不进行换行 */
    width: 100px;/*需要配合宽度来使用*/
}

2、多行文本显示省略号

/* css */
p{　
　　display: -webkit-box;//特别显示模式，将对象作为弹性伸缩盒子模型显示 
　　-webkit-box-orient: vertical; //盒子中内容竖直排列
　　-webkit-line-clamp: 2; //行数
　　overflow: hidden;
    text-overflow: ellipsis;		//文本溢出部分用省略号表示
　　width: 250px;
}

 因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；
注：-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。

3、兼容 数字、英文 不换行

 只需要加入下面的代码

word-break: break-all;

 4、中文字符隔空换行

 如上图只需加上下面样式即可

line-break: anywhere;
/* w3c参考手册竟然没有记录相关属性，还是我眼瞎没看见 */

line-break

设置 CSS 属性 line-break 可以用来处理如何断开（break lines）带有标点符号的中文、日文或韩文（CJK）文本的行。

line-break语法如下：
-auto使用默认的断行规则分解文本。
-loose使用尽可能松散（least restrictive）的断行规则分解文本。一般用于短行的情况，如报纸。
-normal使用最一般（common）的断行规则分解文本。
-strict使用最严格（stringent）的断行原则分解文本。
-anywhere如名同义，任意位置都可以作为换行点，包括任意的标点
具体可以看：https://developer.mozilla.org/zh-CN/docs/Web/CSS/line-break