CSS“Nowrap”无法正常工作

Question

我目前正在制作电子邮件模板。该模板包含彼此相邻的USP。这是我正在使用的代码：

<td width="100%">
  <span style="white-space: nowrap;">
    <img src="checkmark.png" />&nbsp;&nbsp;[text name="USP1"]
  </span>
  &nbsp;&nbsp;&nbsp;&nbsp;
  <span style="white-space: nowrap;">
    <img src="checkmark.png" />&nbsp;&nbsp;[text name="USP2"]
  </span>
  &nbsp;&nbsp;&nbsp;&nbsp;
  <span style="white-space: nowrap;">
    <img src="checkmark.png" />&nbsp;&nbsp;[text name="USP3"]
  </span>
</td>

使用“nowrap”，我试图将USP放在智能手机上。太糟糕了，USP的所有人都站在一起，这使得桌子更宽。

是否有一个简单的内联CSS技巧可以让它们在小屏幕上相互站立？

Answer 1

<强> HTML：

<td class="usps">
  <span>...
</td>

<强> CSS：

table tr td.usps span {
  display: block;
}