[TOC] #### 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; ``` #### 3. 中英文无法自动换行 --- 在一个设定好宽度的容器中，当输入的中文文字长度超过了宽度限制，会自动换行到下一行 ```html <div style="width: 100px;background-color:yellowgreen;">中国经济顶压前行向新向优的发展逻辑</div> ``` 但是，如果输入的是英文字母或数字，无论设定的宽度是多少，都不会换行直接在同一行显示，导致宽度超出设定的大小 原因：这是因为英文字母之间如果没有空格的话，它会默认这是一个英文单词，所以单词就一次输出不换行 ```html <div style="width: 100px;background-color:yellowgreen;">123456789123456789</div> <div style="width: 100px;background-color:yellowgreen;">howoldareyoumyname?</div> ``` 解决方案：增加 `word-break:break-all;` 来强制换行 ```html <div style="width: 100px;background-color:yellowgreen;word-break:break-all;">howoldareyoumyname?</div> ```