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


当前回答

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

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

其他回答

有一种方法可以使用非官方的换行符语法,从Firefox 68开始,它可以在所有主流浏览器中使用。

正文{边距:20px;}.text(文本){溢出:隐藏;文本溢出:省略号;显示:-webkit框;-webkit线夹:2;/*要显示的行数*/线夹:2个;-webkit框方向:垂直;}<div class=“text”>Lorem ipsum dolor坐amet,consectetur adipiscing elit。维内纳提斯·布拉迪(Aliquam consectetur venenatis blandit)。Praesent vehicula,libero non pretium vulputate,lacus arcu facilisis lectus,sed feugiat tellus nulla eu dolor。Nulla porta bibendum lectus quis euismod。Aliquam volutpat ultricies porttitor。克雷斯·里苏斯·尼西,accumsan vel cursus ut,sollicitudin vitae dolor。《圣经》中的Fusce scelerisque eleifend lectus。lacinia egestas suspendissa felis a volutpat。</div>

除非您关心IE用户,否则无需进行线高度和最大高度回退。

这对我有用:

第二部分{宽度: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>

.word-limit{
   display: block;
   text-overflow: ellipsis;
   white-space: nowrap;
   word-wrap: break-word;
   overflow: hidden;
}

该线程的解决方案是使用jquery插件dotdotdot。这不是一个CSS解决方案,但它为您提供了很多“阅读更多”链接、动态调整大小等选项。

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