是否可以使用CSS将文本长度限制为“n”行（或在垂直溢出时剪切）。
文本溢出：省略号；仅适用于1行文本。
原文：
Ultrices natoque mus mattis、aliquam、cras in pellentesquetincidunt elit purus lectus、vel ut aliquet、elementum nunc乌尔纳修女院！坐下！图比斯岛莫斯·廷西杜特！Dapibus sed aenean、magna sagitis、lorem velit
所需输出（2行）：
Ultrices natoque mus mattis、aliquam、cras in pellentesquetincidunt elit purus lectus，velut aliquet，elementum。。。
当前回答
我真的很喜欢线夹，但还不支持firefox。。所以我做了一个数学计算，然后隐藏溢出
.body-content.body-overflow-hidden h5 {
max-height: 62px;/* font-size * line-height * lines-to-show(4 in this case) 63px if you go with jquery */
overflow: hidden;
}
.body-content h5 {
font-size: 14px; /* need to know this*/
line-height:1,1; /*and this*/
}
现在让我们假设你想通过jQuery删除并添加这个类，你需要有一个额外的像素，所以它的最大高度是63像素，这是因为你需要每次检查高度是否大于62像素，但是在4行的情况下，你会得到一个假真，所以额外的像素可以解决这个问题，不会产生任何额外的问题
我将为此粘贴一个coffee脚本，作为一个示例，它使用了默认隐藏的两个链接，类读得更多，读得更少，它将删除溢出不需要的链接，并删除主体溢出类
jQuery ->
$('.read-more').each ->
if $(this).parent().find("h5").height() < 63
$(this).parent().removeClass("body-overflow-hidden").find(".read-less").remove()
$(this).remove()
else
$(this).show()
$('.read-more').click (event) ->
event.preventDefault()
$(this).parent().removeClass("body-overflow-hidden")
$(this).hide()
$(this).parent().find('.read-less').show()
$('.read-less').click (event) ->
event.preventDefault()
$(this).parent().addClass("body-overflow-hidden")
$(this).hide()
$(this).parent().find('.read-more').show()
其他回答
这对我有用：
第二部分{宽度：200px；}p型{显示：块；/*非webkit的回退*/显示：-webkit框；高度：2.6em；/*非webkit的回退，线宽*2*/线高：1.3em；-webkit线夹：2；/*如果更改此设置，请确保更改回退线的高度和高度*/-webkit框方向：垂直；溢出：隐藏；文本溢出：省略号；}＜div＞<p>Lorem ipsum dolor坐amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore</p>＜div＞
以下CSS类将文本限制为两行，并插入省略号以指示溢出的文本。
.two-line-ellipsis {
overflow: hidden;
width: 325px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
我真的很喜欢线夹，但还不支持firefox。。所以我做了一个数学计算，然后隐藏溢出
.body-content.body-overflow-hidden h5 {
max-height: 62px;/* font-size * line-height * lines-to-show(4 in this case) 63px if you go with jquery */
overflow: hidden;
}
.body-content h5 {
font-size: 14px; /* need to know this*/
line-height:1,1; /*and this*/
}
现在让我们假设你想通过jQuery删除并添加这个类，你需要有一个额外的像素，所以它的最大高度是63像素，这是因为你需要每次检查高度是否大于62像素，但是在4行的情况下，你会得到一个假真，所以额外的像素可以解决这个问题，不会产生任何额外的问题
我将为此粘贴一个coffee脚本，作为一个示例，它使用了默认隐藏的两个链接，类读得更多，读得更少，它将删除溢出不需要的链接，并删除主体溢出类
jQuery ->
$('.read-more').each ->
if $(this).parent().find("h5").height() < 63
$(this).parent().removeClass("body-overflow-hidden").find(".read-less").remove()
$(this).remove()
else
$(this).show()
$('.read-more').click (event) ->
event.preventDefault()
$(this).parent().removeClass("body-overflow-hidden")
$(this).hide()
$(this).parent().find('.read-less').show()
$('.read-less').click (event) ->
event.preventDefault()
$(this).parent().addClass("body-overflow-hidden")
$(this).hide()
$(this).parent().find('.read-more').show()
.word-limit{
display: block;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: break-word;
overflow: hidden;
}
截至（几乎）2023年，不再需要一些旧的css规则。
这些显示了所需的最小值，并且可以跨浏览器工作，尽管有前缀语法：
.line-clamp { overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; }
.line-clamp-2 { overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.line-clamp-3 { overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
