选区可见溢出、布局不溢出
场景：聊天气泡文本使用 white-space: pre-wrap，消息里含有大量空格鼠标拖选时高亮区域看起来超出 .message-entry 边界。
痛点：视觉上像"选区溢出/布局异常"，但气泡宽度又没被撑开，容易误判成宽度计算 bug。
解法：在对应消息容器（尽量局部）加裁剪：overflow: hidden;（例如 .textMessage .message-entry）。
原理：pre-wrap 会保留尾随空白；这些空白常以"悬挂空白"参与选区绘制但不参与盒子宽度计算，所以会出现"选区可见溢出、布局不溢出"。overflow: hidden 只裁剪绘制结果，不改变文本换行/宽度语义，属于影响最小修复。
悬挂空白"（Hanging Whitespace）是 CSS 文本排版引擎（Text Shaper / Reflow Engine）为了兼容人类阅读习惯而设计的一种特殊处理机制。
下面我们拆开来聊聊，它到底是怎么作妖的，以及为什么会出现你遇到的"选区溢出，但盒子不溢出"的奇特现象。
什么是悬挂空白？
在 white-space: pre-wrap（或 pre-line）模式下，浏览器被要求既要保留空格，又要自动换行。
当一行的末尾有一连串空格，而紧接着的下一个"真正的单词"放不下、需要换到下一行时，就会触发一个冲突：
-
原则 A ：空格必须保留（因为是
pre-wrap）。 -
原则 B：空格后面没有宽度了，必须换行。
如果把这些行尾空格硬塞在当前行，气泡盒子就会被撑大；如果把它们带到下一行开头，下一行的文本又会无故缩进（这通常不是用户想要的）。
为了折中，W3C 规范规定：这些行尾的空白字符不消失，而是"悬挂"在行末的边界之外。 它们存在于这一行，但被当作"零零兵"，不占用整行盒子的实际布局宽度（Advance Width）。
为什么会"参与选区绘制，但不参与盒子宽度计算"？
这涉及到 CSS 渲染的两个不同阶段：布局阶段（Layout） 和 绘制/交互阶段（Painting/Selection）。
1. 布局阶段（为什么不参与宽度计算）
根据 W3C CSS Text Module Level 3 的规范：
当
white-space允许换行时，行尾的序列空格（Sequence of whitespace）在确定行盒（Line Box）的宽度时，其产生的布局宽度会被重置为 0（或者说被挂起）。
- 对盒子（Box）的影响 ：因为它们的宽度在布局时被算作 0，所以包含块（比如你的
.message-entry）在计算width: fit-content时，根本不把这些空格的宽度算进去。因此，聊天气泡的视觉宽度刚刚好包裹住文本，布局上没有发生溢出。
2. 绘制与选区阶段（为什么会参与高亮）
虽然布局上它们是"透明/无宽度"的，但在 DOM 树和文本流中，这些空格字符是实实在在存在的。
-
对选区（Selection）的影响：当你用鼠标拖选文本时，浏览器的选区引擎（Selection Engine）是基于字符的。由于这些空格在逻辑上依然属于当前行，浏览器在绘制蓝色的"选区高亮背景"时，必须保证用户的交互反馈是连贯的。
-
结果就是，浏览器顺着这些空格的实际字形宽度（虽然在布局里被忽略了）一路画过去，把选区高亮拉得老长，直接冲出了
.message-entry的物理边界。
总结你的解法为什么完美
你采用的 overflow: hidden; 简直是教科书级的"降维打击"：
| 属性/机制 | 对布局（Layout）的影响 | 对视觉/选区（Painting）的影响 |
|---|---|---|
| 悬挂空白本身 | 宽度算作 0，气泡不被撑大。 | 字符依然存在，选区高亮会向外绘制。 |
加上 overflow: hidden |
毫无影响（因为盒子本来就没溢出）。 | 强行裁剪掉超出了盒子边界的所有绘制结果（包括那个讨厌的长选区）。 |
这属于典型的用视觉裁剪（Painting Clip）去修正由于规范逻辑（Spec Logic）导致的视觉瑕疵，可以说是成本最低、副作用最小的优雅解法。
方案
1. 为什么大多数时候不需要搭配white-space: pre-wrap x overflow: hidden？
在常规的网页文章、博客评论或者普通的段落文本中，white-space: pre-wrap 的主要作用是保留用户输入的换行和空格，同时防止文本冲出容器。
-
默认容器宽度通常是固定的或响应式的（如
width: 100%）：在这些场景下，即使行尾有悬挂空白导致选区溢出，因为容器本身没有明显的"气泡边框"或背景色，用户拖选时视觉上并不会觉得突兀或像 Bug。 -
这种情况下，单独使用
pre-wrap就能完美实现"既保留格式又能自动换行"的需求。
2. 什么时候必须搭配？（比如你的聊天气泡场景）
当且仅当满足以下三个条件的交集时，才强烈建议搭配 overflow: hidden：
-
条件 A：容器具有包裹性（
width: fit-content或float等）。容器的宽度是根据文本内容动态撑开的。 -
条件 B：容器有明显的边界。比如有背景色（聊天气泡）、有边框（Border）。
-
条件 C：允许用户进行鼠标划选操作。
在这三个条件同时成立时，由于悬挂空白导致蓝色选区冲出气泡背景，在视觉上会产生严重的"布局错位感"。此时加上 overflow: hidden;，仅仅是为了切掉那个溢出的蓝色选区。
3. 使用 white-space: break-spaces (推荐)
如果你不想用 overflow: hidden;（比如你担心它把气泡里的某些绝对定位的 小图标、红点也给裁剪掉了），针对这种行尾空白问题，还有以下替代方案：
这是 CSS Text Module Level 3 引入的新属性值。
-
行为 ：它和
pre-wrap非常像，但最大的区别在于------它不会让行尾空白"悬挂"。它会把行尾的空格当作普通的有宽度的字符。如果放不下，空格会自动换行到下一行开头。 -
效果 ：因为空格参与了布局计算，所以盒子会被这些空格撑大，或者空格直接换行。这就彻底消除了选区溢出的问题。
-
代价：聊天气泡的宽度可能会被纯空格撑得比文本更宽。