08

分为单行省略、多行省略，核心依赖 overflow 、 text-overflow 、 white-space 组合。

单行文本省略（兼容性最优）
必备三属性，缺一不可

.box {
width: 300px; /* 必须设置宽度 /
white-space: nowrap; / 文本不换行 /
overflow: hidden; / 溢出隐藏 /
text-overflow: ellipsis; / 溢出显示省略号 */
}

多行文本省略
.more-line {
width: 300px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2; /* 限制显示 2 行，可修改数值 */
-webkit-box-orient: vertical;
}

二、JS 动态更改样式
两种常用方式：修改行内样式、切换类名（推荐）

直接操作 style 属性（改单个样式）
语法： 元素.style.样式名 = "样式值"

注意：CSS 连字符属性 → 驼峰命名（例： background-color → backgroundColor ）

测试文本

点击改样式

文本省略
单行： width + nowrap + hidden + ellipsis

多行： -webkit-line-clamp （现代浏览器）

JS改样式
简单样式： 元素.style.驼峰属性

批量样式：优先 classList 增删切换类

图文排版
文字环绕：用 float

规整左右布局：优先 flex

上下排布：默认标准流即可