如何使用CSS將表格單元限制爲一行文本？

我有一個用戶表，其中每行包含他們的名字，電子郵件地址等。對於某些用戶來說，這一行是一個文本行高，其他一些是兩行等等。但是我希望表格的每一行都是一個文本行高，將其餘部分截斷。如何使用CSS將表格單元限制爲一行文本？

我看到了這兩個問題：

其實我的問題是完全類似於第一個，但由於該鏈接是死，我不能學習它。兩個答案都說要使用white-space: nowrap。但是這不起作用，也許我錯過了一些東西。

因爲我不能告訴你的代碼，我轉載了問題：

<style type="text/css"> 
td { 
    white-space: nowrap; 
    overflow: hidden; 
    width: 125px; 
    height: 25px; 
} 
</style> 

<div style="width:500px"> 
<table> 
    <tr> 
     <td>lorem ipsum here... blablablablablablablablablabla</td> 
     <td>lorem ipsum here... blablablablablablablablablabla</td> 
     <td>lorem ipsum here... blablablablablablablablablabla</td> 
     <td>lorem ipsum here... blablablablablablablablablabla</td> 
    </tr> 
</table> 
</div>

沒有white-space表是500像素寬，本文以多行。

但是white-space: nowrap使瀏覽器忽略了width指令，並增加表的寬度，直到所有數據都合適一行。

我在做什麼錯？

來源

2010-07-31 Tomaka17

不是在這個例子中，但在我的真實網站是的。無論如何，我不認爲沒有文檔類型與這個問題有關。 – Tomaka17 2010-07-31 18:21:33

溢出只有在知道從哪裏開始考慮溢出時纔會起作用。您需要設置<td>

TAKE 2

嘗試增加table-layout: fixed; width:500px;表的風格的寬度和高度屬性。

更新3

證實了這一工作：http://jsfiddle.net/e3Eqn/

來源

2010-07-31 18:01:46

我在提問之前已經試過了，但它也不起作用。我編輯了這個問題來添加它 – Tomaka17 2010-07-31 18:22:13

@ Tomaka17，我編輯了我的答案以包含其他說明。 – 2010-07-31 18:44:29

有沒有什麼辦法可以說「如果這個元素不在裏面，溢出是元素的大小」？ – Claudiu 2016-07-03 07:02:15

以下內容添加到您的樣式表：

table{ 
    width: 500px; table-layout:fixed; 
}

您需要添加表格的寬度，以確保下一個屬性將適合指定大小的元素。此處的表格佈局屬性強制瀏覽器在給定的500像素內使用固定佈局。

來源

2010-07-31 18:42:27 cm2

謝謝，我給你+1但是我記得Mike Sherov的回答是被接受的，因爲我知道他的文本溢出的存在感謝他 – Tomaka17 2010-07-31 18:44:31

+1。這非常接近。 – 2010-07-31 18:49:54

以下內容添加到您的樣式表：

table { white-space: nowrap; }

來源

2013-08-06 09:19:20 Googuez

<table border="1" style="width:200px"> 
 
<tr> 
 
    <td>Column 1</td><td>Column 2</td> 
 
</tr> 
 
<tr> 
 
    <td nowrap="nowrap"> 
 
    
 
\t \t Single line cell just do it</td> 
 
    <td> 
 
\t 
 
\t \t multiple lines here just do it</div></td> 
 
</tr> 
 
</table>

簡單而有用的。使用上面的代碼

來源

2015-05-14 08:34:39 user2782717

如何使用CSS將表格單元限制爲一行文本？

回答

相關問題