HTML：隨着表變得越來越窄，文本溢出應該切斷越來越多的文本

我有一個網頁有一個由ASP.NET控件生成的HTML表格。表格的最上面一行模擬一個工具欄。這頂行的佈局有點像這樣：HTML：隨着表變得越來越窄，文本溢出應該切斷越來越多的文本

<tr> 
    <td style="white-space:nowrap;"> 
    <span>Very long title</span>&nbsp; 
    </td> 
    <td> 
    { bunch of hyperlinks with background images, emulating a toolbar } 
    </td> 
</tr>

我堅持的事實，這是一個表，與被投跨度標題區中的內容，並可能與內嵌樣式指定沒有包裝。

這張表應該在頁面縮小時縮小自己的範圍，並且它表現得相當不錯。但是，如果實際的標題文本（可能會有所不同）太長，則它可以有效地限制表格可以獲得的範圍，這可能會導致與頁面上的其他內容重疊。（我正在使用IE8，BTW。）

我嘗試將overflow:hidden,text-overflow:ellipsis和display: inline-block應用於跨度併爲表格單元格添加寬度值，全部通過樣式表。（Display:block在跨度上加倍了行的高度，這是我不想要的，所以inline-block是我的選擇。）標題文本出現了截斷，就像我想的那樣。但桌子不會變窄。

在通過IEDT調整了值和風格的變化之後，我得出結論，當弄清楚表格可能變得有多狹窄時，文本仍被視爲它的全長。跨度相對較短，只有跨度中出現的文字出現，但對於寬度目的而言，文本仍然在那裏。

我沒有發現這種現象記錄在任何地方，但也許我只是沒有得到足夠的。 :)如果text-overflow不能幫助我，我想我必須通過腳本動態截斷標題，我寧願不這樣做。有沒有辦法通過CSS來完成我想要的功能？

來源

2011-10-27 Ann L.

表格的單元格顯示行爲與塊的常見行爲不同。爲了使它更典型的，你需要表的表佈局屬性更改爲「固定」第一，並設置表格的寬度：

table { table-layout: fixed; width: 100%; }

這將禁用細胞的自動調整其大小大多數情況下。之後，你可以像往常一樣設置td的寬度和溢出。

td.title { white-space:nowrap;overflow: hidden; width: 200px; }

這裏是例子：http://jsfiddle.net/vS3qq/1/

來源

2011-10-27 22:28:43

謝謝！這解決了它完美！ –

我認爲這是你在找什麼。首先擺脫style="white-space:nowrap;"。

下一個改變你<span>到<div>風格是這樣的：

<div style="height 18px;overflow:hidden;">

高度值將不得不進行調整以適合行高，但這應該工作。

來源

2011-10-27 22:32:22 Sam

非常感謝。 –

HTML：隨着表變得越來越窄，文本溢出應該切斷越來越多的文本

回答

相關問題