white-space: pre-line 本身不影响点击，换行后文字不可点击是因内容未包裹在可交互标签内、使用了无事件能力的 、父容器 pointer-events: none 或 textarea 无行级事件机制所致。
white-space: pre-line 为什么点了没反应
直接加 white-space: pre-line 却发现换行后文字不可点击，大概率不是样式问题，而是文本内容本身没被正确渲染为可交互节点。该属性只影响空白符和换行符的渲染逻辑，不改变元素的事件捕获能力。
常见错误包括：
- 用
innerHTML插入含<div>，没加 <code><a></a>或onclick） - 换行后的每行文字被
<br>拆开，但<br>是空标签，无法绑定事件，点击区域实际落在行间空白处 - 父容器设置了
pointer-events: none（例如为了穿透点击底层元素），却忘了给换行文本单独设回pointer-events: auto
用 <p></p> 或 <span></span> 包裹换行文本更安全
想让换行后的每段文字都可点击，优先把内容语义化地组织进带交互行为的标签里，而不是靠 CSS “撑出”可点区域。
例如用户评论含换行，要支持“点击某一行跳转到对应时间戳”，就别用 pre-line + div，改用：
<p class="comment"> 第一行内容<br><a href="#t1" class="line-link">第二行内容</a><br><a href="#t2" class="line-link">第三行内容</a> </p>
这样每行都是独立可聚焦、可点击、可读屏的节点。CSS 只需控制间距，不承担事件分发责任。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
绝对定位覆盖层干扰点击时怎么保留换行与可点击性
当用 position: absolute 的 <a></a> 铺满整个文本容器来实现“整块可点”，又希望用户能选中下方换行文本时，pointer-events: none 会直接废掉链接——这不是折中方案，是功能退化。
真正可行的做法是：
- 保持覆盖层存在，但监听
mousedown和click的触发位置与时间差 - 若鼠标按下后移动距离
且在 <code>150ms内触发click，视为点击，执行跳转 - 否则视为拖拽起点，允许浏览器默认选中文本（此时不阻止默认行为）
- 关键点：覆盖层必须设
pointer-events: auto，不能依赖none做“透明化”
textarea 里的换行提交后还能不能点
textarea 本质是表单控件，它的换行是用户输入行为，不是 DOM 节点，所以“点击某一行”这种需求在原生 textarea 中不存在——它没有子元素，也没有行级事件委托机制。
如果业务需要类似效果（比如日志查看器中点击某行高亮），必须把内容提取出来，用 split('
') 拆成数组，再逐行渲染为带 data-line="2" 的 <div> 或 <code><p></p>，并配合 white-space: pre-line 保持格式。否则你永远只能监听整个 textarea 的 change 或 input，没法区分哪一行被点中。
容易忽略的一点：后端返回的 JSON 字段若含
，前端用 JSON.parse() 后它仍是真实换行符；但若从 HTML 属性里取值（如 data-text="a
b"），JS 不会自动解析转义，得手动 .replace(/\n/g, '
')。
