如何实现图标左浮动且文本环绕换行对齐首行的布局？

我想要创建一种图标左浮动于文本旁的布局，类似图片在文本块中的对齐方式。要求文本环绕图标，当文本换行时，需从首行文本正下方开始，而非图标旁边。

预期效果 #

当前效果 #

我的代码 #

<div style={{width:"100%"}}>
  <IconButtonMUI
    onClick={() => {
      window.open(url, '_blank');
    }}
    size='small'
    style={{float:"left"}}
  >
    <Iconify
      width={16}
      icon="solar:map-arrow-up-bold"
    />
  </IconButtonMUI>
  <Stack
    direction="row"
    alignItems="center"
    style={{float:"none", textAlign: 'justify'}}
    sx={{
      typography: 'h6',
    }}
  >
    {marker.placeName}
  </Stack>
</div>

解决方案 #

问题出在你使用了direction="row"的Stack组件——它作为flex容器会打断文本的自然文档流，导致无法实现环绕效果。可以按以下方式修改：

• 替换Stack组件为普通块级元素（如div），去掉flex布局
• 给图标按钮添加右侧外边距，避免和文本紧贴
• 确保文本容器处于正常文档流中

修改后的代码 #

<div style={{width:"100%"}}>
  <IconButtonMUI
    onClick={() => {
      window.open(url, '_blank');
    }}
    size='small'
    style={{float:"left", marginRight: "8px"}}
  >
    <Iconify
      width={16}
      icon="solar:map-arrow-up-bold"
    />
  </IconButtonMUI>
  <div 
    style={{textAlign: 'justify'}}
    sx={{
      typography: 'h6',
    }}
  >
    {marker.placeName}
  </div>
</div>

说明 #

移除Stack的flex布局后，文本回到正常文档流，就能自动环绕左侧浮动的图标，换行时会从首行文本下方开始；marginRight: "8px"用于调整图标和文本的间距，提升视觉舒适度。

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