html中单个汉字无法真正强制换行，所谓“字内换行”实为line-height过小导致裁剪的视觉错觉或误用break属性所致；可靠方案是使用writing-mode实现竖排或svg/canvas精细控制。
HTML 中单个汉字强制换行的常见误解
HTML 默认不会让一个汉字自动断成两行——它把每个汉字当作不可分割的“原子”，除非你主动干预。所谓“一个字占两行”，其实是视觉上看到字被拆开（比如顶部一半在第一行、底部一半在第二行），这通常不是预期行为，而是 line-height、font-size 或容器高度失控导致的裁剪错觉，或者是误用了 word-break / overflow 等属性。
用 br 或 实现“字内换行”的真实需求
真有场景需要把一个汉字视觉上分两行（比如竖排标题、艺术排版、超窄容器内强适应），不能靠 CSS 自动断字，得手动切开。可行办法只有两种：
-
<br>放在字中间：不合法但浏览器会容错渲染，例如<span>中<br>国</span>→ “中”在上行，“国”在下行；注意这不是一个字分两行，而是两个字分两行 - 用零宽空格
拆字：如中国，配合word-break: break-all或overflow-wrap: break-word，才可能在极窄容器里把“中”字本身挤成两行（实际是字体渲染异常，不推荐） - 更可靠的做法是用 SVG 或 Canvas 绘制单字，逐笔画控制位置——但这就脱离了纯 HTML 范畴
line-height 太小导致汉字被截断的典型表现
最常被误认为“一个字占两行”的情况，其实是容器高度不够，line-height 设得太小（比如 line-height: 0.5），导致字体上下部分被父容器 overflow: hidden 截掉，看起来像字被劈开了。
- 检查父元素是否有
height+overflow: hidden组合 - 用浏览器开发者工具选中文字，看 computed
line-height和实际行框高度是否匹配 - 中文推荐最小
line-height: 1.2（对font-size: 16px），低于 1.0 极易出裁剪
真正想让单字“竖着排”？用 writing-mode
如果本意是让一个汉字从上到下显示（比如印章效果、侧边标题），不是强行折行，那应该用 writing-mode：
立即学习“前端免费学习笔记（深入）”；
<div style="writing-mode: vertical-rl; text-orientation: upright;">字</div>
-
writing-mode: vertical-rl让文字从右到左竖排，每字占一列 -
text-orientation: upright保证汉字不旋转，保持正立 - 注意 Safari 对
text-orientation支持较晚，iOS 14.5+ 才稳定 - 该方案不改变字数或换行逻辑，只是重定义书写方向
