在 HTML 段落中显示前 3 行答案

【问题标题】：Show first 3 lines in HTML paragraph在 HTML 段落中显示前 3 行
【发布时间】：2013-03-25 10:31:56
【问题描述】：

我只想使用 HTML 格式显示下面段落的前 3 行。我正在 W3Schools 上搜索，但没有显示如何操作。

<body>

loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlor
loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore
loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore
loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore
loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore

</body>

【问题讨论】：

您接受的答案错误（它没有指定overflow，因此不会隐藏任何内容），如果确实如此，它将显示4行而不是3行。为什么这被标记为正确答案？
不要使用 w3school 网站，它会损害教育，请参阅 w3fools.com
见stackoverflow.com/questions/3404508/…

标签： html css

【解决方案1】：

您可以给容器一个height 和line-height 并将其overflow 属性设置为hidden：

HTML

<p>loremloremlorem...</p>

CSS

p {
    height:60px;
    line-height:20px; /* Height / no. of lines to display */
    overflow:hidden;
}

JSFiddle example.

【讨论】：

【解决方案2】：

将段落的高度设置为三个行高。喜欢 -

p{
  line-height:1.2em;
  height:3.6em;
  overflow:hidden;
}

将溢出设置为隐藏以隐藏溢出的文本

【讨论】：

但是，line-height 通常应设置为大于1em 的值，例如1.2em。为了便于阅读，这是正常的排版。

【解决方案3】：

您可以将-webkit-line-clamp 属性与div 一起使用。

div {
  width: 100%;
  line-height: 1.2em;
  height: 3.6em;
  background-color: gainsboro;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

<div>
  loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore
  loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore
  loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore
  loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore
  loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore
</div>

【讨论】：