css td溢出与可变长度跨度

Question

我有一个两列的表。 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; 
} 

这是结果：