HTML中style属性直接在标签内用style="属性: 值;"设置，优先级最高，适用于调试或动态样式；overflow需作用于容器并配合明确宽高才能生效；单行省略需white-space、overflow、text-overflow组合，多行省略依赖WebKit私有属性且Firefox支持有限；Flex/Grid中需注意子项min-width/min-height和flex-shrink以避免溢出失效。
HTML 中的 style 属性怎么用
直接在标签里写 style="属性: 值;" 就能生效，比如 <p style="color: red; font-size: 14px;">文字</p>。它优先级高于外部 CSS 文件和 <style></style> 块，适合临时调试或动态生成样式。
注意：多个声明用分号隔开，末尾分号可省略但建议保留；值含空格（如 font-family: "Microsoft YaHei"）必须加引号；CSS 属性名要用短横线格式（background-color），不能写成驼峰（backgroundColor）。
overflow 控制内容溢出容器的实际写法
溢出控制核心是给容器加 overflow 相关 CSS 属性，不是给内容本身加。常见组合：
-
overflow: hidden;—— 完全裁剪超出部分，不显示滚动条 -
overflow: auto;—— 仅在内容真正溢出时才显示滚动条（推荐用于响应式容器） -
overflow: scroll;—— 强制显示滚动条（即使没溢出，也会占位） -
overflow-x: hidden; overflow-y: auto;—— 分别控制横向/纵向，比如表格固定表头时禁用横向滚动
必须确保容器有明确宽高（如 width、max-width、height 或 max-height），否则 overflow 不会触发。常见错误是只设 overflow 却忘了限制尺寸。
立即学习“前端免费学习笔记（深入）”；
文字溢出显示省略号（单行/多行）
这是溢出处理中高频需求，但需要组合多个属性，且浏览器支持有差异：
- 单行省略：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - 多行省略（WebKit 内核，Chrome/Safari 支持）：
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;
text-overflow: ellipsis 本身不生效，必须配合 overflow: hidden 和 white-space（单行）或 -webkit-line-clamp（多行）。Firefox 对多行省略支持有限，生产环境需降级处理（如用 JS 截断）。
Flex/Grid 容器里溢出行为容易被忽略的点
Flex 或 Grid 子项默认会“伸缩”以适应容器，反而可能掩盖溢出问题。典型表现是文字撑开父容器、图片变形、滚动条不出现：
- 子项加
min-width: 0;或min-height: 0;（针对 flex item），防止内容强行撑大 - 容器设
flex-shrink: 1;（默认已有），但若子项写了flex-shrink: 0;就会拒绝收缩 - Grid 中某列用
grid-template-columns: 1fr minmax(0, 1fr));可避免文本强制撑宽
溢出控制最终依赖于「容器尺寸约束 + 溢出策略 + 子项收缩意愿」三者配合，漏掉任一环都可能失效。
