CSS-不要将跨距内容包装在固定宽度的表格单元格中 [英] CSS - don't wrap span contents in fixed width table cell

问题描述

我对固定宽度的表格单元格和span元素(里面有其他元素，文本+按钮)有问题.我不希望这些span内容被包装(将span元素放置在该单元格中)，像这样:

I have a problem with fixed width table cell and span elements (with additional elements inside, text + button). I don't want those span contents to be wrapped (span elements are placed in that cell), like this:

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

如何实现这一目标?我尝试使用空格，但没有成功(跨度内容没有换行，但表格单元格不再是固定宽度...)(

How to achieve this? I tried with white-space but with no success (span contents don't wrap but table cell is not fixed width anymore...) (http://jsfiddle.net/dvjq4/).

推荐答案

我找到了一个解决方案(受Matthew Trow的启发).

I've found a solution (inspired by Matthew Trow).

跨度元素类(例如.ex-element)必须看起来:

Span element class (in example .ex-element) must look:

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

这篇关于CSS-不要将跨距内容包装在固定宽度的表格单元格中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！