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如名同义，任意位置都可以作为换行点，包括任意的标点

具体可以看：/zh-CN/docs/Web/CSS/line-break

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