具有可变长度跨距的css td溢出

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

我的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>

---

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

结果是：

---

你好，Interrobang。不幸的是，这没有帮助。列的宽度正在扩展，但不会隐藏溢出。无论如何，谢谢你的帮助。干杯…你在测试什么浏览器？我会打开一个虚拟机看看。另外，澄清一下——你确保替换所有的CSS了吗？我更改了表、td:first-child和span.hide-overflow中的属性。到目前为止，我已经确认我的代码可以在IE9、Firefox和Chrome中使用。请详细说明您使用的浏览器。非常感谢Interrobang。它工作起来很有魅力！你太棒了！！！谢谢它能在IE9下工作吗？

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;
  }

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;
}