/* 两行省略号的CSS代码 */
.ellipsis-two-lines {
display: -webkit-box;
-webkit-line-clamp: 2; /* 限制在一个块元素显示的文本的行数 */
-webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
overflow: hidden; /* 隐藏超出的内容 */
text-overflow: ellipsis; /* 用省略号...代替超出的文本 */
}
display: -webkit-box;
:使用弹性盒子模型布局,兼容性较好。-webkit-line-clamp: 2;
:限制文本显示为两行,超过部分用省略号代替。-webkit-box-orient: vertical;
:设置子元素垂直排列,确保文本按行显示。overflow: hidden;
:隐藏超出容器的内容。text-overflow: ellipsis;
:当文本溢出时,用省略号表示。上一篇:css 兄弟元素
下一篇:css给文字加下划线
Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3
Laravel 中文站