且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

纯CSS省略文本的三行或更多行

更新时间:2023-12-04 12:38:52

您可以使用 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