1、实现单行内容裁剪，后跟省略号

<div style="width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">.NET 8 是 .NET 7 的 后续任务。 作为长期支持（LTS）版本，它将支持三年 。</div>

效果如下：

2、实现多行内容裁剪

<div style="width:150px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;">.NET 8 是 .NET 7 的 后续任务。 作为长期支持（LTS）版本，它将支持三年 。</div>

效果如下：

说明：

（1）display: -webkit-box; 为将对象作为弹性伸缩盒子模型显示 。

（2）-webkit-box-orient为设置弹性伸缩盒子模型的子元素的排列方式 。

（3）-webkit-line-clamp是用来限制一个块元素内显示的文本的行数。 

（4）text-overflow: ellipsis; 为用省略号“…”隐藏超出范围的文本 。