<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>元素中显示n行文字且超出隐藏显示省略号</title>
<style type="text/css">
.div1 {
width: 300px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
/*white-space: initial;*/
/*
overflow 属性规定当内容溢出元素框时发生的事情。
>值: overflow: hidden; 溢出隐藏
text-overflow 属性规定当文本溢出包含元素时发生的事情。
>值: text-overflow: ellipsis; 超出文本设置为...
display 属性设置元素如何显示。
>值: display: -webkit-box; 将元素转换为盒子模型
-webkit-line-clamp 属性用于限制块容器可能包含的行数。仅当显示属性设置为"-webkit-box"或"-webkit-inline-box"并且"-webkit-box-orient"属性设置为"垂直"时，此属性才有效。
>值: -webkit-line-clamp: n; n为几,则限制几行
-webkit-box-orient 指定div元素的子元素横向排列
>值: -webkit-box-orient: vertical; 从顶部向底部垂直布置子元素
white-space 属性设置如何处理元素内的空白。
>值: white-space: initial; white-space: initial;
>注意：若在该元素上还有父级，设置了white-space:nowrap;若想实现此效果需要在该元素中加上white-space:initial;还原换行；
*/
}
</style>
</head>
<body>
<div class="div1">
首先,我们通过 overflow 属性来规定: 当内容溢出元素框时会发生的事情,因为后面的内容会设置只显示 n 行,所以我们设置元素溢出隐藏,则值为 hidden;
随即,我们通过 text-overflow 属性规定: 当文本溢出包含元素时发生的事情,我们想让文本超出部分显示为...省略号,所以我们选择值 ellipsis;
然而,我们还需要将该元素模型进行转换,通过 display 属性设置元素如何显示,设置值为 -webkit-box 可以将元素转换为盒子模型;
此时,我们可以限制我们需要展示的文本行数了: -webkit-line-clamp 属性用于限制块容器可能包含的行数,当然,有个限制,。仅当显示属性设置为"-webkit-box"或"-webkit-inline-box"并且"-webkit-box-orient"属性设置为"垂直"时，此属性才有效;
那么,我们设置显示 n 行,超出n行则 溢出隐藏,显示省略号;
前文提到: -webkit-line-clamp 属性仅当设置为"-webkit-box"或"-webkit-inline-box"并且"-webkit-box-orient"属性设置为"垂直"时，此属性才有效,那么我们设置 -webkit-box-orient,
指定div元素的子元素横向排列,选择它的值 vertical 从顶部向底部垂直布置子元素(竖直);
到此为止,我们 元素中显示n行文字且超出隐藏显示省略号 步骤完成;
那么,还有一种情况:
如果 该元素上还有父级，且设置了 white-space:nowrap; 若想实现此效果需要在该元素中加上 white-space:initial 还原换行；
</div>
</body>
</html>
浙公网安备 33010602011771号