<!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>