顯示 HTML 段落的前 3 行
[英]Show first 3 lines in HTML paragraph
問題描述
我只想使用 HTML 格式顯示下面段落的前 3 行。 我在 W3Schools 上搜索，但它沒有顯示如何做。
<body>
loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlor
loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore
loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore
loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore
loremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremloremlore
</body>
3 個解決方案
解決方案1
19 2013-03-25 10:34:09
您可以為容器指定height和line-height ，並將其overflow屬性設置為hidden ：
HTML
<p>loremloremlorem...</p>
CSS
p {
height:60px;
line-height:20px; /* Height / no. of lines to display */
overflow:hidden;
}
解決方案2
16 2013-03-25 10:34:23
將段落的高度設置為三個行高。 像 -
p{
line-height:1.2em;
height:3.6em;
overflow:hidden;
}
將溢出設置為隱藏以隱藏溢出的文本
解決方案3
3 2020-02-18 07:22:07
您可以將-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>
僅顯示段落的前四行，后跟省略號
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.