Question

我想使用html格式仅显示下面段落的前3行。我正在搜索w3shool，但它没有显示如何做到这一点。请帮忙

<body>

loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlor
loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore
loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore
loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore
loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore

</body>

Answer 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

Answer 2

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

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

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

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

在html段落中显示前3行

3 个答案: