CSS“Nowrap”不能正常工作答案

【问题标题】：CSS "Nowrap" doesn't work properlyCSS“Nowrap”不能正常工作
【发布时间】：2016-03-06 21:20:22
【问题描述】：

我目前正在构建一个电子邮件模板。该模板包含彼此相邻排列的 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 技巧可以让它们在小屏幕上相互站立？

【问题讨论】：

你能把每一个都放入自己的<tr>吗？
一个活生生的例子会有所帮助，我无法一眼看出你想要做什么。但是一看到&nbsp;&nbsp;&nbsp;&nbsp;就放弃了，请不要用空格格式化...
nowrap = 空白序列将折叠成单个空白。文本永远不会换行到下一行。文本继续在同一行，直到遇到
标记

标签： css nowrap

【解决方案1】：

HTML：

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

CSS：

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

【讨论】：