显示 HTML 段落的前 3 行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15612747/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show first 3 lines in HTML paragraph
提问by yakusha
I want to show only the first 3 lines of the paragraph below using HTML formatting. I am searching on W3Schools but it doesn't show how to do it.
我只想使用 HTML 格式显示下面段落的前 3 行。我在 W3Schools 上搜索，但它没有显示如何做。
<body>
loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlor
loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore
loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore
loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore
loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore
</body>
回答by James Donnelly
You can give the container a heightand line-heightand set its overflowproperty to hidden:
您可以给容器一个heightandline-height并将其overflow属性设置为hidden：
HTML
HTML
<p>loremloremlorem...</p>
CSS
CSS
p {
height:60px;
line-height:20px; /* Height / no. of lines to display */
overflow:hidden;
}
回答by svineet
Set the height of the paragraph to three line-heigths. Like -
将段落的高度设置为三个行高。喜欢 -
p{
line-height:1.2em;
height:3.6em;
overflow:hidden;
}
Set overflow to hidden to hide overflowing text
将溢出设置为隐藏以隐藏溢出的文本
回答by Penny Liu
You can use -webkit-line-clampproperty with div.
您可以将-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>