纯CSS省略文本的三行或更多行 [英] Pure CSS Ellipsis For Three or More Lines of Text

问题描述

有没有一个CSS的方式（没有JavaScript / jQuery）只显示前两行，如果有三个或更多的行，隐藏额外的行和显示省略号？

例如，我如何使用这个小提琴：

http://jsfiddle.net/0yyr3e63/

...并使其看起来像这样？

  Lorem Ipsum Dolor 
 Sit Amet Consectetur 
 
 Ut Enim Ad Minim 
 Veniam Quis Nostrud ... 
 
 Duis Aute Irure 
 Dolor In ... 
  

解决方案

您可以使用 text-overflow：ellipsis height 。

像这样

  .truncate 
 {
 width：250px; 
 white-space：nowrap; 
 overflow：hidden; 
 text-overflow：ellipsis; 
 height：100px; 
} 
  

通过使用文本溢出，可以显示您的输出而不使用javascript。 / p>

来源

来源链接

了解有关截断的详情。阅读此链接

新更新

可以使用此方法。

  css 
 .classname：after {
 content：\02026 ; 
} 
  

多行省略

我认为可能有用的几个链接

1.Codepen示例

2.Css技巧

Is there a CSS-only way (no JavaScript/jQuery) to only show the first two lines and, if there are three or more lines, hide the extra lines and show an ellipsis?

For example, how can I take this fiddle:

http://jsfiddle.net/0yyr3e63/

...and make it look like this?

Lorem Ipsum Dolor
Sit Amet Consectetur

Ut Enim Ad Minim
Veniam Quis Nostrud...

Duis Aute Irure
Dolor In...

Thanks in advance.

解决方案

You can use text-overflow:ellipsis property with height.

Like this

.truncate 
{
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height:100px;
}

By using text-overflow, you can display your output without using javascript.

Sources

Source Link

To Learn more about truncating. Read this link

New Update

For multiline ellipsis you can use this method.

css
.classname:after{
content: "\02026";
} 

Multiline-Ellipsis

Few Links which i think might be useful

1.Codepen example

2.Css Tricks

这篇关于纯CSS省略文本的三行或更多行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！