MJML模板移动端渲染异常：右侧社交图标换行问题求助

问题描述 #

使用MJML渲染图标区域时，桌面视图下右侧社交图标可正常单行显示，但在iOS Safari移动端视图中，右侧图标出现换行情况。

测试代码 #

<mj-section>
  <mj-column padding="0" padding-top="30px">
    <mj-image src="https://www.gstatic.com/webp/gallery/1.jpg" href="https://mjml.io" width="32px" padding="4px" align="left" />
  </mj-column>
  <mj-column padding="0" width="49%" padding-top="30px">
    <mj-social font-size="15px" icon-size="30px" mode="horizontal" padding="0" align="right">
      <mj-social-element name="facebook" href="https://mjml.io/">
      </mj-social-element>
      <mj-social-element name="google" href="https://mjml.io/">
      </mj-social-element>
      <mj-social-element name="twitter" href="https://mjml.io/">
      </mj-social-element>
      <mj-social-element name="twitter" href="https://mjml.io/">
      </mj-social-element>
      <mj-social-element name="twitter" href="https://mjml.io/">
      </mj-social-element>
    </mj-social>
  </mj-column>
</mj-section>

视图效果 #

• 桌面视图：
  

• 移动端视图：
  

修复方案 #

问题根源是移动端容器宽度不足，且默认布局未强制图标保持单行，可通过以下方式修复：

方案1：调整列宽度+强制不换行 #

将右侧列宽度设为自适应，同时给mj-social添加CSS强制图标不换行：

<mj-section>
  <mj-column padding="0" padding-top="30px" width="auto">
    <mj-image src="https://www.gstatic.com/webp/gallery/1.jpg" href="https://mjml.io" width="32px" padding="4px" align="left" />
  </mj-column>
  <mj-column padding="0" padding-top="30px" width="auto">
    <mj-social font-size="15px" icon-size="30px" mode="horizontal" padding="0" align="right" css="white-space: nowrap;">
      <mj-social-element name="facebook" href="https://mjml.io/">
      </mj-social-element>
      <mj-social-element name="google" href="https://mjml.io/">
      </mj-social-element>
      <mj-social-element name="twitter" href="https://mjml.io/">
      </mj-social-element>
      <mj-social-element name="twitter" href="https://mjml.io/">
      </mj-social-element>
      <mj-social-element name="twitter" href="https://mjml.io/">
      </mj-social-element>
    </mj-social>
  </mj-column>
</mj-section>

方案2：用Flex布局控制对齐与换行 #

给mj-social添加Flex布局CSS，确保图标始终单行右对齐：

<mj-section>
  <mj-column padding="0" padding-top="30px">
    <mj-image src="https://www.gstatic.com/webp/gallery/1.jpg" href="https://mjml.io" width="32px" padding="4px" align="left" />
  </mj-column>
  <mj-column padding="0" width="49%" padding-top="30px">
    <mj-social font-size="15px" icon-size="30px" mode="horizontal" padding="0" align="right" css="display: flex; justify-content: flex-end; flex-wrap: nowrap;">
      <mj-social-element name="facebook" href="https://mjml.io/">
      </mj-social-element>
      <mj-social-element name="google" href="https://mjml.io/">
      </mj-social-element>
      <mj-social-element name="twitter" href="https://mjml.io/">
      </mj-social-element>
      <mj-social-element name="twitter" href="https://mjml.io/">
      </mj-social-element>
      <mj-social-element name="twitter" href="https://mjml.io/">
      </mj-social-element>
    </mj-social>
  </mj-column>
</mj-section>

方案3：缩小图标尺寸/间距（备选） #

如果上述方案仍有适配问题，可适当缩小图标尺寸（比如将icon-size调整为24px）或减少图标间距，确保总宽度适配移动端容器。

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