CSS文本指定宽度或高度超出显示省略号...

如上图，在做网站过程中，偶尔会遇到宽度很窄，但是内容一行或者一列很多，超出设定的宽度和高度，如果直接用overflow: hidden;感觉又很突兀。那就让内容超出指定宽度或高度就显示省略号...

具体方法如下：

1. 单行超出指定宽度时显示省略号...

width:200px;           /*宽度根据您的实际情况设置*/
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;

2. 多行超出指定高度时显示省略号...

height:500px;        /*高度根据您的实际情况设置*/
overflow:hidden;
text-overflow:ellipsis;
display: -webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;

如文章开始图片那样的问题，加上方法1的CSS代码后，效果如下：

如果你也遇到了这样的问题，就试试上面的那两种方法吧，感谢阅读。