9

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

<body>

loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlor
loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore
loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore
loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore
loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore

</body>
4

3 回答 3

19

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

HTML

<p>loremloremlorem...</p>

CSS

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

JSFiddle 示例。

于 2013-03-25T10:34:09.410 回答
16

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

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

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

于 2013-03-25T10:34:23.013 回答
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>

于 2020-02-18T07:22:07.947 回答