如何实现图标旁文本换行时对齐首行而非换行至图标下方？

我想把文本显示在图标右侧：

当前遇到的问题：

• 第一种写法中，第一行文本显示在图标中间，但第二行文本跑到了图标下方，效果如下：
  
• 第二种写法中，所有文本都显示在图标下方，效果如下：
  

我需要让文本始终显示在图标右侧，换行时保持首行对齐。

尝试过的代码 #

第一种写法 #

<div class="row" style="display:flex;">
    <div class="col">
        <img src=" https://i.sstatic.net/Ir7Kl.png" height="50px" width="50px" />
        <span style="font-size:20px;font-weight:bold">Testing:</span> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make  when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.<br />
    </div>
</div>

第二种写法 #

<div class="row" style="display:flex;">
    <div class="col-auto">
        <img src="https://i.sstatic.net/Ir7Kl.png" height="50px" width="50px" />
    </div>
    <div class="col-auto">
        <span style="font-size:20px;font-weight:bold">Test test1:</span> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make  when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.<br />
    </div>
</div>

解决方案 #

问题出在文本容器的宽度设置和flex布局的对齐方式上，调整后的代码如下：

<div class="row" style="display:flex; align-items:flex-start;">
    <div class="col-auto">
        <img src="https://i.sstatic.net/Ir7Kl.png" height="50px" width="50px" />
    </div>
    <div class="col">
        <span style="font-size:20px;font-weight:bold">Testing:</span> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make  when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
</div>

关键修改说明 #

• 图标容器用col-auto，仅占据自身宽度；文本容器改用col，自动填充剩余水平空间，避免内容过长被挤到图标下方。
• 外层flex容器添加align-items:flex-start，让图标和文本顶部对齐（若需要居中对齐可改为align-items:center）。
• 移除多余的<br />，让文本自然换行，保持排版整洁。

这样修改后，文本会始终在图标右侧，换行时自动对齐首行，符合预期效果。

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