html - 限制具有 span 元素的 td 宽度

Question

我有以下代码:

  <td>
    <span class='label label-success'>text1</span>
    <span class='label label-success'>text2</span>
    <span class='label label-success'>text3</span>
    <span class='label label-success'>text4</span>
    <span class='label label-success'>text5</span>
  </td>

我想限制的宽度，这样我就可以在达到最大宽度时在跨度之间换行，如下所示:

text1 text2 text3
text4 text5

假设 text4 超出了最大宽度。

想法？

Answer 1

将 table-layout:fixed 添加到您的 CSS 中的 table 标签，然后添加您想要的 td 的宽度，例如这个:

HTML:

<table>
  <td> 
    <span class='label label-success'>text1</span>
    <span class='label label-success'>text2</span>
    <span class='label label-success'>text3</span>
    <span class='label label-success'>text4</span>
    <span class='label label-success'>text5</span>
  </td>
</table>

CSS:

table {
   border: 1px solid #000;
   table-layout: fixed;
}

table td {
   width: 100px; /* The width you want */
}

这是一个 fiddle :http://jsfiddle.net/2mNux/1/