css 文字溢出显示省略号 - Kaiqisan

ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである,今天又是开新坑的一天！来搞点css，这次讲溢出显示省略号的方法，它在实际场合是非常实用的所以，就像今天记下来。
前排提示，本人所有文档全部来源网络，通过自我实验得出的结果！

它有一套固定的公式

单行溢出

/* 关键代码 */
.demo {
	width: 400px;
	height: 300px;
    /* height可以没有，但是我建议一定要有width稍微框一下 */
    /* 下面三行是关键 */
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}

接下来我们来分别讲解一下每一个属性的作用吧！

overflow: 这个自不用多讲，它可以把所有溢出当前块的东西全部隐藏，下面俩属性是在它的基础上运作的。

text-overflow: 如果文本溢出，希望再额外显示的文本。ellipsis代表显示省略号，fade表示不显示，另外，火狐浏览器还可以支持显示自定义文本

text-overflow: 'XXXX' ellipsis;

white-space: 指定元素内的空白怎样处理,选定nowrap表示不换行。详细可见菜鸟教程

多行溢出

我希望输入内容超过五行之后在第五行显示省略号。

/* 关键代码 */
.demo {
	margin: 100px 0 0 50px;
	border: 1px solid #000000;
	width: 400px;
	height: 300px;
	display: -webkit-box;		
	-webkit-box-orient: vertical; /* 如果浏览器内核不是WebKit的话就无法支持该方法 */ 
	-webkit-line-clamp: 3;		/* 希望三行后溢出显示省略号 */ 
	overflow: hidden;
}

目前的显示效果

这里显示效果还不是很理想，第三行意思一下之后后面的文字还是正常显示。

所以，这个方法需要我们控制一下块的高度，就可以达到想要的效果

很好，很有精神！、

PS：上面的方法只能应对当前的层次的文字，对于当前更深层次的内容就没有办法了！

<div class="demo">
	<p>ddddddddddddddddddddddddddddddddddddd</p>
</div>
<!-- 如果给了demo样式，但是无法作用于里面的p标签内的内容 -->

总结

如果css不行就使用js吧！自己封装一个方法之后以后直接搬就完事了！