[分享]css两行省略号怎么打出来的

在前端开发中，我们常常会遇到需要省略长文本的情况，而CSS中提供了两种方式可以实现省略号的效果。/ 第一种方式：单行文本省略号 / textoverflow:ellipsis; whitespace:...

在前端开发中，我们常常会遇到需要省略长文本的情况，而CSS中提供了两种方式可以实现省略号的效果。

/* 第一种方式：单行文本省略号 */
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;

/* 第二种方式：多行文本省略号 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden; 

第一种方式适用于单行文本，通过设置文本溢出时的表现形式为省略号，同时设置文本不能换行以及整个文本容器的溢出部分被隐藏来达到省略的效果。

第二种方式适用于多行文本，采用Flexbox的方式，将文本放在一个纵向的线性布局容器中，通过设置容器的行数上限来达到省略的效果，同时为了防止文本溢出容器的高度，使用overflow:hidden来隐藏溢出部分。

以上两种方式是实现文本省略号效果中最常用的方式，掌握这两种方式可以方便开发者在实际工作中应用。