web文本折叠

Web期末笔记：文本折叠（文字超出省略）

一、单行文本省略（最常考）

核心4句代码（缺一不可）
.box{
width: 200px; /* 固定宽度 /
white-space: nowrap; / 文字不换行 /
overflow: hidden; / 超出隐藏 /
text-overflow: ellipsis; / 超出显示省略号... */
}
各属性作用

1. width：限制容器宽度，文字才有溢出空间

2. white-space: nowrap：强制文字一行展示

3. overflow: hidden：裁剪超出容器的文字

4. text-overflow: ellipsis：用 ... 代替被截断文字

二、多行文本折叠省略（2行/3行）

兼容webkit浏览器（考试通用写法）
.box{
width:200px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2; /* 显示2行，数字改几就是几行 */
-webkit-box-orient: vertical;
}
• -webkit-line-clamp: 3：限制只展示3行，多余折叠省略

三、纯CSS完全隐藏超出文字（无省略号）

只写两句即可：
.box{
width:200px;
overflow:hidden;
}
四、简答题考点

1. 单行文字折叠省略必备属性？
   固定宽度、white-space:nowrap、overflow:hidden、text-overflow:ellipsis。

2. 实现两行文字折叠用什么属性？
   -webkit-line-clamp，搭配弹性盒垂直排列。

3. text-overflow失效的原因？
   缺少 white-space:nowrap 或 overflow:hidden，容器没有固定宽度。