标题是页面中最容易出问题的排版元素之一。同一个标题在桌面端显示得好好的，一到手机上就因为容器变窄被迫折行，而且经常断得很别扭：比如标题末尾只剩一个字孤零零挂在第二行，或者英文单词被硬生生从中间截断，观感非常差。这类问题的本质是标题文本、容器宽度和字体参数之间的配合失衡，需要从换行属性和媒体查询两个层面同时入手解决。
先搞清楚换行属性的区别：word-break、overflow-wrap、line-break
很多开发者遇到换行问题，第一反应就是加上word-break: break-all，结果发现英文单词被无差别地拆开，比如important被拆成importa和nt，阅读体验反而更差了。要正确处理换行，必须先分清几个容易混淆的属性。
word-break控制的是断行规则本身。默认值normal遵循各自语言的换行规则，中文可以在任意汉字之间断行，英文只在空格处断行；break-all则允许在任意字符之间断行，对英文单词杀伤力很大；keep-all正好相反，禁止在中文汉字之间断行，中文会像英文单词一样整块换行，在纯中文标题里会造成大片留白。
overflow-wrap（旧名word-wrap）的策略温和许多。它默认值也是normal，但当设为break-word时，只有当单个单词长到放不下一整行时才会在单词内部断行，其余情况仍在正常断点换行。这正好解决长英文单词或长URL撑破容器的问题，又不影响普通文本的断行质量。
line-break是针对中日韩文本的细节属性，主要控制标点禁则，比如行首不能出现逗号、句号，行尾不能出现引号前半部分等。移动端中文标题如果出现标点悬挂在行首的情况，可以设置line-break: strict来收紧规则。
针对标题场景，推荐的组合是：
.title {
overflow-wrap: break-word; /* 兜底处理超长单词 */
word-break: break-word; /* 部分浏览器支持的折中写法 */
line-break: strict; /* 标点禁则 */
}
用媒体查询分档调整字号与字间距，让断行位置更可控
换行属性只能保证不断在奇怪的位置，但无法解决孤字换行（最后一行只有一个字）的问题。孤字换行的根源往往是：标题在小屏幕上字号太大，或字间距过宽，导致文本总宽度刚好超过容器一点点。这时候通过媒体查询在窄屏下适当缩小字号、收紧字间距，往往能让标题刚好收进一行，或者断在一个语义上更合理的位置。
思路是把屏幕分成几档，逐级调整。大屏保持设计稿字号，中屏轻微缩放，小屏进一步压缩并收紧letter-spacing：
.title {
font-size: 32px;
letter-spacing: 0.02em;
line-height: 1.4;
overflow-wrap: break-word;
}
/* 平板 */
@media (max-width: 768px) {
.title {
font-size: 26px;
letter-spacing: 0.01em;
}
}
/* 手机 */
@media (max-width: 480px) {
.title {
font-size: 20px;
letter-spacing: 0;
line-height: 1.45;
}
}
/* 小屏手机，进一步压缩 */
@media (max-width: 360px) {
.title {
font-size: 18px;
letter-spacing: -0.01em; /* 轻微负字距，帮助标题收进一行 */
}
}
这里有个细节值得注意：letter-spacing用em做单位而不是px，这样字间距会随字号自动缩放，不同档位之间的视觉节奏更一致。负字距不要用得太狠，一般不超过-0.02em，否则汉字之间会显得拥挤粘连。
另一种更现代的思路是使用clamp()函数实现流式字号，让字号在区间内随视口宽度平滑变化，避免断点处出现跳变：
.title {
/* 视口360px时约18px，1200px时约34px */
font-size: clamp(18px, 4vw + 4px, 34px);
}
流式字号和媒体查询并不冲突，可以叠加使用：字号交给clamp()平滑过渡，letter-spacing和line-height等细节参数仍按断点分档调整，兼顾流畅性和精确控制。
进阶技巧：孤行控制与平衡换行
即使字号和字间距都调好了，某些标题仍会碰到孤字行或孤词行。CSS提供了一个专门的伪元素技巧来强制至少两个字换行，在标题末尾追加一个不可分割的空格占位：
.title::after {
content: "\00a0\00a0"; /* 两个不换行空格 */
}
原理是给标题末尾塞入两个不可断开的空白字符，如果最后一个字即将掉到下一行，它至少会带上倒数第二个字一起换行，避免孤字悬挂。这个方法简单有效，但要注意容器需要设置overflow: hidden或预留右侧空间，防止多出的空白把文本挤出容器。
对于居中的多行标题，还可以使用text-wrap: balance，它会让浏览器自动平衡各行长度，让换行后的多行文本宽度尽量一致，而不是第一行占满、第二行只剩两三个字：
.title {
text-wrap: balance; /* 各行长度趋于均衡 */
max-width: 20em; /* 限制每行字符数，效果更明显 */
}
需要注意的是，text-wrap: balance目前主流现代浏览器已支持，但它只对最多六行左右的文本生效，且作用于块级元素，标题场景正好适用。对于需要严格控制换行点的内容（比如品牌口号），也可以用<wbr>标签或零宽空格在语义合适的位置预设断点，浏览器只会在必要时在这些位置断行。
总结一下，移动端长标题的换行优化可以按三步走：先用overflow-wrap和line-break保证断行位置合法，再通过媒体查询或clamp()分档调整字号与letter-spacing让断行时机更合理，最后用孤行控制或text-wrap: balance处理多行标题的视觉均衡。三层手段叠加使用，基本可以覆盖绝大多数标题排版场景。