css td溢出，跨度可变

Question

我有一个有两列的表。 2列的宽度已设置，不应修改。第一列包含并排放置的2个跨度。第一个跨度的内容具有可变长度。第二个跨度也。我想要做的是当内容到达边界时隐藏第二个跨度的溢出。我尝试了几件事，但我找不到解决办法。希望有人能提供帮助。提前感谢您的回复。干杯。马克。

http://cssdesk.com/eAN3d

我的HTML：

<table>
  <tr>
    <th>th1</th>
    <th>th2</th>
  </tr>
  <tr>
    <td>
      <span>Paul</span>
      <span class="hide-overflow">Some text with no overflow</span>
    </td>
    <td>txt</td>
  </tr>
  <tr>
    <td>
      <span>Emmanuelle</span>
      <span class="hide-overflow">The overflow of this text string has to be hidden.The td has to be only one line and the width should not be extended.</span>
    </td>
    <td>txt</td>
  </tr>
</table>

我的CSS：

table{
  width:400px;
  border-spacing: 0px;
  border-collapse: collapse;}

th,td{
  border:1px solid black;}

td:first-child{
  width:350px;}

td:last-child{
  width:50px;}

.hide-overflow{
  background-color:yellow;
  }

Answer 1

我对此并不十分满意，但它确实在Firefox中有效。 jsFiddle

table{
  width:400px;
  border-spacing: 0px;
  border-collapse: collapse;
  table-layout:fixed;
}

th,td {
  border:1px solid black;
  white-space: nowrap;
}

th:first-child, td:first-child{
  width:350px;
  overflow:hidden;
}

th:last-child, td:last-child{
  width:50px;
}

.hide-overflow{
  background-color:yellow;
}

span.hide-overflow {
  white-space:nowrap;
}

结果如下：