糊糊的前端学习笔记——如何将文本行数确定为固定行，并将多余部分用省略号表示【Day04】

{overflow: hidden;white-space: nowrap;text-overflow:ellipsis;}

white-space: nowrap/*规定段落中的文本不进行换行*/

text-overflow: ellipsis; /*当对象内文本溢出时显示省略标记*/

这是百度的第一条方法，当然，如果CSS如上表示的话，只能做到单行文本超出长度显示省略号。

看到网络上有很多方法说用纯CSS无法实现，要配合JS，在页面里判断字符串s长度，当超过某个值max时，取s的长max的子串，并在后面合并字符串"..."。这种方法确实可行。

但是经过搜索资料，我发现还有一种更简便的纯CSS的方法。

我对我文本外层的div如下定义：

{overflow:hidden;text-overflow:ellipsisline-height:20px;display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }

得到效果如下：



即对外层div定义为盒模型

overflow: hidden;/*溢出盒子部分隐藏*/

text-overflow: ellipsis; /*当对象内文本溢出时显示省略标记*/

display: -webkit-box; /* 定义为盒模型 */

-webkit-box-orient: vertical;  /* 盒方向定义为竖直方向编排显示 */

-webkit-line-clamp: 2;/* 限制元素显示的文本行数，当前为2行*/

CSS中加入这几行，可实现我们需要的功能。