CSS内容超过宽度显示省略号

实现代码

overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行

没效果解决方案：放置文字的元素使用块级元素 例如 p，div，不要使用 span 等行内元素。

例：

// css
.text{
	width: 50px;
	overflow:hidden; //超出的文本隐藏
	text-overflow:ellipsis; //溢出用省略号显示
	white-space:nowrap; //溢出不换行
}
// html 
<p class="text">你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p>

文字超过两行及以上折叠省略

overflow:hidden;
display:-webkit-box; //将对象作为弹性伸缩盒子模型显示;
text-overflow:ellipsis;//溢出部分用省略号代替
-webkit-line-clamp:2; //设置文本显示两行
-webkit-box-orient:vertical;  //从上到下排列子元素;
white-space:normal;

CSS内容超过宽度显示省略号

原文：https://www.cnblogs.com/hanlk/p/14511090.html