Laravel  
laravel
文档
数据库
架构
入门
php技术
    
Laravelphp
laravel / php / java / vue / mysql / linux / python / javascript / html / css / c++ / c#

css两行省略号

作者:死亡之神   发布日期:2025-04-01   浏览:62

/* 两行省略号的CSS代码 */

.ellipsis-two-lines {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 限制在一个块元素显示的文本的行数 */
  -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
  overflow: hidden; /* 隐藏超出的内容 */
  text-overflow: ellipsis; /* 用省略号...代替超出的文本 */
}

解释说明:

  1. display: -webkit-box;:使用弹性盒子模型布局,兼容性较好。
  2. -webkit-line-clamp: 2;:限制文本显示为两行,超过部分用省略号代替。
  3. -webkit-box-orient: vertical;:设置子元素垂直排列,确保文本按行显示。
  4. overflow: hidden;:隐藏超出容器的内容。
  5. text-overflow: ellipsis;:当文本溢出时,用省略号表示。

上一篇:css 兄弟元素

下一篇:css给文字加下划线

大家都在看

css 红色

css文字超长省略号

css 渐变字体

css背景图片等比例缩放

css文字删除线

css 自定义滚动条

css flex gap

css上一个兄弟元素怎么找到

css文字超出隐藏变省略号鼠标上去展示完整

css文字不允许换行

Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3

Laravel 中文站