在html段落中显示前3行

yak*_*sha 5 html css

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

<body>

loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlor
loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore
loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore
loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore
loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore

</body>
Run Code Online (Sandbox Code Playgroud)

Jam*_*lly 17

您可以给容器a height并将line-heightoverflow属性设置为hidden:

HTML

<p>loremloremlorem...</p>
Run Code Online (Sandbox Code Playgroud)

CSS

p {
    height:60px;
    line-height:20px; /* Height / no. of lines to display */
    overflow:hidden;
}
Run Code Online (Sandbox Code Playgroud)

JSFiddle示例.


svi*_*eet 14

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

p{
  line-height:1.2em;
  height:3.6em;
  overflow:hidden;
}
Run Code Online (Sandbox Code Playgroud)

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


Pen*_*Liu 8

You can use -webkit-line-clamp property with 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;
}
Run Code Online (Sandbox Code Playgroud)
<div>
  loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore
  loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore
  loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore
  loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore
  loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore
</div>
Run Code Online (Sandbox Code Playgroud)