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;
}