“text”实现“文本溢出截断省略”文本，多出用“...“显示

1.单行文本溢出省略
核心 CSS 语句

overflow: hidden；（文字长度超出限定宽度，则隐藏超出的内容）
white-space: nowrap；（设置文字在一行显示，不能换行）
text-overflow: ellipsis；（规定当文本溢出时，显示省略符号来代表被修剪的文本）

优点

.text{
        width: 80vw;
        background-color: black;
        color: white;
        margin: 0 auto;
    }

这是没有限制前的样子 

.text{
        width: 80vw;
        background-color: black;
        color: white;
        margin: 0 auto;
                overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

 进行单行限制后

兼容性好，对各大主流浏览器有好的支持
响应式截断，根据不同宽度做出调整
文本溢出范围才显示省略号，否则不显示省略号
省略号位置显示刚好
短板

只支持单行文本截断，并不支持多行
适用场景

适用于单行文本溢出显示省略号的情况
 

多行文本溢出省略（-webkit-line-clamp）我常用的
核心 CSS 语句

overflow: hidden；（文本溢出限定的宽度就隐藏内容）
-webkit-line-clamp: 2；（用来限制在一个块元素显示的文本的行数, 2 表示最多显示 2 行。 为了实现该效果，它需要组合其他的WebKit属性）
display: -webkit-box；（和 -webkit-line-clamp: 2；结合使用，将对象作为弹性伸缩盒子模型显示 ）
-webkit-box-orient: vertical；（和 -webkit-line-clamp: 2；结合使用 ，设置或检索伸缩盒对象的子元素的排列方式 ）
text-overflow: ellipsis；（多行文本的情况下，用省略号“…”隐藏溢出范围的文本)
 

.text_2{
		
		width: 80vw;
		background-color: #000000;
		color: white;
		margin-top: 30px;
		display: -webkit-box;
		/* 和 -webkit-line-clamp: 2；结合使用，将对象作为弹性伸缩盒子模型显示 */
		-webkit-line-clamp: 2;
		/* 用来限制在一个块元素显示的文本的行数, 2 表示最多显示 2 行。 为了实现该效果，它需要组合其他的WebKit属性 */
		overflow: hidden;
		/* 文本溢出限定的宽度就隐藏内容 */
		-webkit-box-orient: vertical;
		/* 和 -webkit-line-clamp: 2；结合使用 ，设置或检索伸缩盒对象的子元素的排列方式 */
		text-overflow: ellipsis;
		/* 多行文本的情况下，用省略号“…”隐藏溢出范围的文本 */
		
		
	}

 就是下面这样

当然，除了这两种方法外，还用其他的方法，比如 （伪元素 + 定位）、（Float）等。

Text Overflow - TailwindCSS中文文档 | TailwindCSS中文网Utilities for controlling text overflow in an element.https://www.tailwindcss.cn/docs/text-overflow大家有兴趣可以了解一下