flex-wrap异常换行问题：光标脱离文本单独换行的修复方案

我实现了带有动态光标的文本效果，期望光标触碰到屏幕边缘时才换行。当前使用flex-wrap: wrap实现光标换行，但当文本因overflow-wrap: break-word自动断词换行时，光标却独自换到新行，即使该行仍有足够空间。调整flex-wrap等属性未解决，寻求让光标尽可能跟随文本同行的修复方法。

相关场景说明 #

• 正常情况1：光标能容纳在行内，未换行
• 正常情况2：光标超出屏幕边缘，已换行
• 异常情况：文本自动断词换行后，光标独自跳到新行，当前行仍有剩余空间

当前代码 #

CSS #

.typing-content {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  overflow-wrap: break-word;
}

#start-line {
  color: white;
  margin: 0px 5px;
  font-size: 1.9rem;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

#cursor {
  margin-top: 5px;
  background-color: #FFF;
  height: 1.9rem;
  width: 1rem;
}

HTML #

<div class="typing-content">
  <p id="start-line">AHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH </p>
  <div id="cursor"></div>
</div>

方法一：让光标融入文本流（推荐） #

把文本容器改为行内元素，让光标作为文本的一部分跟随换行，彻底避免flex布局的适配问题：

.typing-content {
  overflow-wrap: break-word; /* 保留自动断词功能 */
}

#start-line {
  color: white;
  margin: 0 5px;
  font-size: 1.9rem;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  display: inline; /* 改为行内元素，和光标处于同一文本流 */
}

#cursor {
  display: inline-block; /* 保持块级尺寸特性 */
  vertical-align: text-bottom; /* 对齐文本底部，调整位置匹配 */
  margin-left: 2px;
  background-color: #FFF;
  height: 1.9rem;
  width: 1rem;
}

方法二：调整flex布局属性（保留flex结构） #

如果需要保留flex布局，通过修改文本容器的flex属性，让它不强制占满容器宽度：

.typing-content {
  display: flex;
  flex-wrap: wrap;
  overflow-wrap: break-word;
}

#start-line {
  color: white;
  margin: 0 5px;
  font-size: 1.9rem;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  flex: 0 1 auto; /* 禁止放大，宽度自适应内容 */
  min-width: 0; /* 允许内容断词时收缩，避免强制撑满容器 */
}

#cursor {
  align-self: flex-start; /* 对齐文本顶部 */
  margin-top: 5px;
  background-color: #FFF;
  height: 1.9rem;
  width: 1rem;
}

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