添加<strong>等标签时如何避免文本拆分错乱并维持正确顺序？

问题场景 #

原本的布局代码实现了图片+文本的链接样式，显示正常：

<div style="display: flex; flex-direction: column;">
  <a href="xxxxxx" target="_blank" style="text-decoration: none; display: flex; align-self: stretch; align-items: flex-start; flex-shrink: 0; padding: 8px 0px; cursor: pointer;">
    <img
      src="public/common/like&comment.png"
      alt="like&comment"
      style="width: 68px; height: 68px; align-self: stretch;"
    />
    <div style="display: flex; flex-grow: 1; align-self: stretch; align-items: center; color: #212121; margin-left: 16px;">
      This is a testing title to be perform- Important topic to be announce
    </div>
  </a>

  <a>
    .....
  </a>
</div>

正常显示效果：

但在文本中加入<strong>标签后，文本被拆分成两块，排版错乱：

<div style="display: flex; flex-direction: column;">
  <a href="xxxxxx" target="_blank" style="text-decoration: none; display: flex; align-self: stretch; align-items: flex-start; flex-shrink: 0; padding: 8px 0px; cursor: pointer;">
    <img
      src="public/common/like&comment.png"
      alt="like&comment"
      style="width: 68px; height: 68px; align-self: stretch;"
    />
    <div style="display: flex; flex-grow: 1; align-self: stretch; align-items: center; color: #212121; margin-left: 16px;">
      This is a testing title to be perform- <strong>Important topic to be announce</strong>
    </div>
  </a>

  <a>
    .....
  </a>
</div>

错乱显示效果：

问题根源 #

包裹文本的<div>设置了display: flex，此时该容器内的直接子元素——包括普通文本节点和<strong>标签——都会被当作独立的Flex项目，默认按横向排列。当这些Flex项目的布局空间或对齐方式出现冲突时，就会导致文本拆分、排版错乱。

修复方案 #

方案1：移除文本容器的display: flex属性 #

如果不需要该容器作为Flex布局，直接去掉display: flex，让它恢复默认的块级元素行为，内部文本和<strong>会正常作为行内内容排版。同时如果需要文本垂直居中，可以用line-height替代align-items: center：

<div style="display: flex; flex-direction: column;">
  <a href="xxxxxx" target="_blank" style="text-decoration: none; display: flex; align-self: stretch; align-items: flex-start; flex-shrink: 0; padding: 8px 0px; cursor: pointer;">
    <img
      src="public/common/like&comment.png"
      alt="like&comment"
      style="width: 68px; height: 68px; align-self: stretch;"
    />
    <!-- 移除display:flex，用line-height实现垂直居中 -->
    <div style="flex-grow: 1; align-self: stretch; color: #212121; margin-left: 16px; line-height: 68px;">
      This is a testing title to be perform- <strong>Important topic to be announce</strong>
    </div>
  </a>

  <a>
    .....
  </a>
</div>

方案2：给所有文本内容套一个统一容器 #

在文本节点和<strong>标签外层添加一个<span>（或其他容器），让Flex容器的直接子元素只有这个容器，避免文本和标签被拆分成多个Flex项目，同时保留原来的Flex对齐效果：

<div style="display: flex; flex-direction: column;">
  <a href="xxxxxx" target="_blank" style="text-decoration: none; display: flex; align-self: stretch; align-items: flex-start; flex-shrink: 0; padding: 8px 0px; cursor: pointer;">
    <img
      src="public/common/like&comment.png"
      alt="like&comment"
      style="width: 68px; height: 68px; align-self: stretch;"
    />
    <div style="display: flex; flex-grow: 1; align-self: stretch; align-items: center; color: #212121; margin-left: 16px;">
      <!-- 用span包裹全部文本内容 -->
      <span>This is a testing title to be perform- <strong>Important topic to be announce</strong></span>
    </div>
  </a>

  <a>
    .....
  </a>
</div>

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