#### 1. 代码示例 --- 显示一行内容，超出部分使用省略号表示（只有块元素才会生效） ```css .nowrap { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } ``` 显示两行内容，超出部分使用省略号表示 ```css .line-clamp-2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* 显示行数 */ } ``` 解决英文和数字不会自动换行的问题 ```css word-break: break-all; ``` #### 2. 代码解析 --- ` -webkit-line-clamp` 用于限制块元素显示文本的行数，它是一个不规范的属性，没有出现在 CSS 规范草案中。 为了实现限制文本的行数，需要组合其他 webkit 属性，常见结合属性: ```css /* 将对象作为弹性伸缩盒子模型显示 */ display: -webkit-box; /* 设置或检索伸缩盒对象的子元素的排列方式 */ -webkit-box-orient: vertical; /* 用省略号“...”隐藏超出范围的文本 */ text-overflow: ellipsis; ```