单选按钮后跟超长文本需用label包裹并设display: flex，input加vertical-align: top和margin-top，文本容器设flex: 1和word-break: break-word；移动端需扩大label点击区域并确保焦点反馈。
单选按钮（<input type="radio">）后面跟超长文本时，默认会撑开容器、破坏布局，且文字不换行、对齐错乱——这不是 CSS 重置能一劳永逸解决的，得从标签结构、display 行为和盒模型三处同时干预。
radio + label 必须包裹，不能裸放文本
常见错误是直接写 <input type="radio"> 这是一段非常非常长的说明文字，用来解释这个选项的具体含义和使用场景……。浏览器会把文本当作 input 的后续内联内容，但 input 是替换元素，无法控制其后文本的换行与基线对齐。
- 必须用
<label></label>显式包裹整个选项：包括input和对应文本 -
label设为display: block或flex，才能让内部文本自然换行 - 同时给
input加vertical-align: top，避免默认baseline导致的上下偏移
label 内部用 flex 布局控制对齐与换行
仅设 display: block 能换行，但无法精确控制 radio 和文本的垂直居中或间距。更可控的方式是用 display: flex：
-
label设display: flex; align-items: flex-start;（不用center，否则长文本会把 radio 拉高） -
input[type="radio"]加margin-top: 0.25em;微调纵向位置 - 文本容器（如
<span></span>或直接文本节点）设flex: 1; word-break: break-word;，强制在任意字符间断行 - 避免用
white-space: pre-wrap，它会保留原始换行符，反而干扰布局
移动端需额外处理 touch 区域与点击反馈
在小屏上，radio 本身点击热区极小，用户容易点不中；而长文本换行后，若未扩大可点击区域，体验会明显下降。
- 给
label设置最小高度（如min-height: 2.5em;）并加padding: 0.5em 0.75em;，确保触控友好 - 不要只依赖
for/id关联，label包裹结构本身就能触发 click，更可靠 - 禁用系统默认 focus outline 时，务必提供替代视觉反馈（如背景色变化），否则键盘用户无法感知焦点
- 测试时重点检查 iOS Safari 下
label的click是否被截断——某些旧版本对 flex 容器内的事件冒泡有异常
最易被忽略的是：当多个 radio 组横向排列（比如用 display: inline-flex）时，word-break: break-word 可能导致某一项突然换两行，把整行高度顶高，破坏对齐。这种情况下，宁可用 max-width 限定文本宽度，再配合 overflow: hidden; text-overflow: ellipsis; 截断，也比布局错位强。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
