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


当前回答

以下CSS类将文本限制为两行,并插入省略号以指示溢出的文本。

.two-line-ellipsis {
  overflow: hidden;
  width: 325px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

其他回答

这对我有用:

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

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

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

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

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

基本示例代码,学习代码很容易。检查样式CSS注释。

表tr{显示:柔性;}表tr td{/*启动*/显示:内联块;/*<-在显示css中防止<tr>*/文本溢出:省略号;空白:nowrap;/*完*/填充:10px;宽度:150px;/*空间大小限制*/边框:1px实心黑色;溢出:隐藏;}<表><tbody><tr><td>Lorem ipsum dolor坐amet,consectetur adipiscing elit。Nulla egestas erat ut luctus posuere。Praesent和commodo eros。在tellus中,Vestibulum eu nisl vel dui ultrices ultricies vel。</td><td>Praesent vitae tempus nulla。Donec vel porta velit公司。Fusce mattis enim前任Mauris eu malesuada ante。Aenean id aliquet leo,nec ultricies tortor。Curabitur non mollis elit。Morbi euismod ante amet iaculis pharetra。Mauris id ultricies urna。崩溃尼西多尔。Curabitur tellus erat,调味品ac enim non,varius tempor nisi。Donec dapibus justo odio,sed consequat eros feugiat feugiat。</td><td>Pellentesque mattis consequat ipsum sed sagitis。Pellentsque consectetur前庭odio,aliquet auctor ex elementum sed。悬疑门massa nisl,quis interstie libero auctor varius。Ut erat nibh,流苏状舌舌Ut,iaculis interdum sapien。我的格言,坐在我的圣经中间。</td></tr><tr><td>Sed viverra massa laoret urna dictum,et frigilla dui调戏。杜伊斯·波塔(Duis porta)、弗内纳蒂斯前舌(ligula ut venenatis pretium)、智人(sapien tellus blandit felis)、非龙虾(non-lobortis orci erated justo)。Vivamus hendrerit、iaculis vehicula、nibh nisi fermentum auge、sagitis的quamnibh dui等人。</td><td>Nullam mollis nullaa justo,nec tincidunt urna suscipit non。Donec malesuada dolor non dolor interdum,id ultrices neque egestas。整只怀孕大熊猫坐在直径为欧盟的地方。Etiam dignissim坐在自由大熊猫的地方,在consequat est阿利奎特。</td><td>猫的前庭,对其他动物来说,是一种非常重要的动物。Fusce egestas,volutpat impredite中的兽人,risus velit convallis sapien,sodales lobortis risus lectus id leo。Nunc vel diam vel Nunc congue finibus。龟头前庭,咽鼓管,耳鼻喉舌。Donec rutrum purus在tincidunt sagitis。只要你愿意就好了。</td></tr></tbody></table>