如何防止标点符号（逗号、句号等）单独换行？

问题根源排查 #

先检查页面DOM结构：jQuery动态插入SVG时，大概率把原本连续的文本拆分成了多个独立节点（比如前序文本、SVG、标点各为一个节点），浏览器排版时会将这些节点视为独立的inline元素，在特定宽度下就会出现标点单独换行的情况。

具体解决方案 #

1. 调整SVG插入位置，避免拆分文本节点

不要将SVG插入到文本中间，而是放在整个文本块的末尾，或者用容器将文本和SVG包裹在同一排版上下文里：

// 错误示例：可能在文本中间插入SVG导致节点拆分
$('.target-text').append('<svg class="icon" viewBox="0 0 24 24"><path d="..."></path></svg>');

// 修正：先将文本内容包裹在统一容器中，再插入SVG
$('.target-text').wrapInner('<span class="text-content"></span>');
$('.text-content').append('<svg class="icon" viewBox="0 0 24 24"><path d="..."></path></svg>');

2. 用CSS强制文本与标点绑定

如果无法调整DOM结构，可将前序文本和标点用<span>包裹，设置不换行规则：

<!-- 调整后的HTML结构 -->
<div class="target-text">
  <span class="no-break">这是一段测试文本，</span>
  <svg class="icon" viewBox="0 0 24 24"><path d="..."></path></svg>
</div>

.no-break {
  white-space: nowrap;
}
/* 同时调整SVG的垂直对齐，避免打乱文本流 */
.icon {
  display: inline-block;
  vertical-align: middle;
  margin-left: 4px;
}

3. 优化容器排版规则

给包含文本和SVG的父容器设置更合理的断行规则，覆盖浏览器默认行为：

.target-text {
  overflow-wrap: break-word;
  word-break: keep-all; /* 中文环境下避免在字词中间断行 */
  hyphens: none; /* 禁用自动连字符断行 */
}

验证方法 #

用浏览器开发者工具（F12）查看元素的DOM结构，确认标点和前序文本是否处于同一文本节点或同一容器内；调整页面宽度测试，观察标点是否还会单独换行。

内容的提问来源于stack exchange，提问作者KristapsF