css文字折叠 |九宫格 flex css

CSS中的文字折叠，即是指在文字内容过长时，通过CSS样式对其进行折叠，只显示部分文字，同时提供展开和收起功能。

.ellipsis{
white-space: nowrap; /* 指定文字不换行 */
overflow: hidden; /* 隐藏超出范围的文字 */
text-overflow: ellipsis; /* 用省略号代替超出部分 */
}

上述代码是实现文字折叠的基本样式。通过给文本所在的容器元素添加这个样式，可以让文本在超出容器宽度时自动折叠，并且用省略号代替超出部分的文字。

.ellipsis-more{
max-height: 72px; /* 指定文本折叠后的最大高度（根据实际需求设置） */
overflow: hidden; /* 隐藏超出范围的文字 */
position: relative; /* 设置相对定位，便于后续添加展开和收起按钮 */
}
.ellipsis-more::after{
content: "展开"; /* 默认状态显示的文字（根据实际需求设置） */
position: absolute; /* 设置绝对定位在折叠文本上方 */
right: 0; /* 距离容器右侧0px */
bottom: 0; /* 距离容器底部0px */
background-color: #fff; /* 设置背景颜色为白色，遮盖部分文本 */
padding: 0 20px; /* 添加内边距，美化显示效果（根据实际需求设置） */
}
.ellipsis-more.open::after{
content: "收起"; /* 展开状态显示的文字（根据实际需求设置） */
}

上述代码则是给折叠后的文本添加展开和收起功能。通过添加一个伪元素::after，在折叠文本上方显示一个按钮，并用绝对定位进行位置调整。同时添加open类，可以改变展开按钮的文字，并实现展开和收起的状态切换。

通过以上两段代码的结合，就可以实现一段具有折叠、展开和收起功能的文本。