/* 单行文字省略 */
.single-line-ellipsis {
white-space: nowrap; /* 防止文本换行 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 超出部分用省略号表示 */
width: 200px; /* 设置容器宽度 */
}
/* 多行文字省略 */
.multi-line-ellipsis {
display: -webkit-box; /* 使用弹性盒模型 */
-webkit-box-orient: vertical; /* 垂直排列子元素 */
-webkit-line-clamp: 3; /* 控制显示的行数,这里是3行 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 超出部分用省略号表示 */
width: 200px; /* 设置容器宽度 */
}
单行文字省略:
white-space: nowrap;:防止文本换行。overflow: hidden;:超出容器的部分会被隐藏。text-overflow: ellipsis;:当文本超出容器时,使用省略号 (...) 表示。多行文字省略:
display: -webkit-box;:使用弹性盒模型来布局。-webkit-box-orient: vertical;:使子元素垂直排列。-webkit-line-clamp: 3;:控制显示的行数(这里设置为3行)。overflow: hidden;:超出容器的部分会被隐藏。text-overflow: ellipsis;:当文本超出容器时,使用省略号 (...) 表示。上一篇:css 设置背景透明
下一篇:css隐藏table
Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3
Laravel 中文站