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

這是結果：