CSS

【问题标题】：CSS - don't wrap span contents in fixed width table cellCSS - 不要将跨度内容包装在固定宽度的表格单元格中
【发布时间】：2013-12-26 10:51:54
【问题描述】：

我对固定宽度的表格单元格和跨度元素（内部有其他元素，文本 + 按钮）有疑问。我不希望这些 span 内容被包装（span 元素放置在该单元格中），如下所示：

<td style="width: 250px;">
  <span>Test<button>Remove</button></span>
  <span>Test<button>Remove</button></span>
  ...
</td>

如何做到这一点？我尝试使用空白但没有成功（跨度内容不换行，但表格单元格不再是固定宽度...）（http://jsfiddle.net/dvjq4/）。

【问题讨论】：

标签： html css

【解决方案1】：

我找到了一个解决方案（受 Matthew Trow 的启发）。

Span 元素类（例如.ex-element）必须看起来：

.ex-element {
    display: inline-block;
}

【讨论】：

【解决方案2】：

尝试删除空格：nowrap;来自 span 元素。

.ex-element {
   /* white-space: nowrap; */  
}

【讨论】：

你的问题是什么？您不希望跨度被包裹，并且表格列的宽度固定。您添加的所有跨度不能只有一行。它必须在某个时候打破。由于表格列的宽度在没有空格的情况下取决于内容的宽度，所以不能有固定的宽度，宽度往往会增加。
不是spans，而是spans的内容；）我写了这段代码，所以我在之前尝试不使用空格：p 我需要一起使用标签+按钮，但是其他span（标签+按钮对）可以是（甚至必须）被包裹。只是在一起。简单，没有冒犯:)

【解决方案3】：

尝试将表格包装在一些包装 div 中，然后在 div 上设置 overflow:auto 和 white-space: nowrap;。

.wpr {
    width: 250px;
    overflow: auto;
    display:block;
    white-space: nowrap;
    border: 1px solid black;
}

【讨论】：

【解决方案4】：

您可以简单地将您的跨度设置为显示块：

.ex-element { 
display: block; }

【讨论】：