是否可以使用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。。。


当前回答

您可以执行以下操作:

.max行{显示:块;/*或内联块*/文本溢出:省略号;换行:换行;溢出:隐藏;最大高度:3.6em;线高:1.8em;}<p class=“max lines”>Lorem ipsum dolor坐amet,consectetur adipiscing elit。Nunc vitae leo dapibus,accumsan lorem eleifend,pharetra quam。Quisque前庭commodo justo,eleifend mollis enim blandit eu。Aenean hendrerit nisl et elit maximus finibus公司。Suspendis scelerisque consectetur nisl mollis sceleriske</p>

其中,最大高度:=线高度:×<线数>(单位:em)。

其他回答

据我所知,这只可能使用高度:(一些em值);溢出:隐藏,即使这样它也不会有幻想。。。最后。

如果这不是一个选项,我认为没有一些服务器端预处理(很难,因为文本流不可能可靠地预测)或jQuery(可能但可能很复杂)是不可能的。

对于使用内联样式的反应者:

<p
style={{
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    display: '-webkit-box',
    lineClamp: 2,
    WebkitLineClamp: 2,
    WebkitBoxOrient: 'vertical',
}}
>Some Text</p>

截至(几乎)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; }

我一直在寻找这个,但后来我意识到,该死的我的网站使用php!!!为什么不在文本输入上使用修剪功能并播放最大长度。。。。

对于那些使用php的人,这里也有一个可能的解决方案:http://ideone.com/PsTaI

<?php
$s = "In the beginning there was a tree.";
$max_length = 10;

if (strlen($s) > $max_length)
{
   $offset = ($max_length - 3) - strlen($s);
   $s = substr($s, 0, strrpos($s, ' ', $offset)) . '...';
}

echo $s;
?>

目前不能,但将来可以使用文本溢出:ellipis lastline。目前,它可以在中使用供应商前缀Opera 10.60+:示例