解决字体超出容器的核心是控制文本显示方式并配合媒体查询动态调整：单行用text-overflow+nowrap+hidden；多行用-webkit-line-clamp（需兼容处理）；优先采用clamp()等流体字号方案，并检查盒模型与换行策略。
字体超出容器通常是因为内容过长、容器宽度固定或响应式断点没适配好。解决核心是：控制文本显示方式 + 配合媒体查询动态调整字体大小和布局。
用 text-overflow 实现单行截断
当文本只允许显示一行，且不能换行时，用 text-overflow: ellipsis 最直接：
- 必须配合 white-space: nowrap（禁止换行）
- 必须设置 overflow: hidden（隐藏溢出部分）
- 父容器需有明确宽度（如 width: 100% 或固定值）
示例 CSS：
.title {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
多行文本截断（WebKit 方案）
CSS 原生不支持多行 text-overflow，但可用 WebKit 的 -webkit-line-clamp 实现两行或三行截断：
立即学习“前端免费学习笔记（深入）”；
- 需设 display: -webkit-box
- -webkit-box-orient: vertical（垂直堆叠）
- -webkit-line-clamp: 2（限制行数）
- 同样要加 overflow: hidden
注意：该方案在 Firefox 和旧版 IE 中不兼容，需搭配 JS 回退逻辑或仅用于移动端为主场景。
用 media query 动态缩放字体
单纯截断治标不治本。更优做法是让字体随屏幕变小而缩小，避免触发截断：
- 用 rem 或 vw 单位替代固定 px 字号
- 在关键断点（如 768px、480px）用 @media 调整 font-size
- 可结合 clamp() 函数实现流体字号：
font-size: clamp(1rem, 2.5vw, 1.5rem);
这样既保持可读性，又减少溢出概率。
补充建议：检查盒模型与内边距
有时“超出”其实是视觉错觉：
- 检查是否误设了 padding 或 border 导致内容区实际变窄
- 确认未使用 box-sizing: content-box（默认值），推荐全局设为 border-box
- 对英文/数字长串（如 URL、ID），加 word-break: break-all 或 overflow-wrap: break-word
不复杂但容易忽略。
