「前」填充字符與最小寬度和自動換行時大小

我有一些字符串（所有隻是字母和稀有換行符，沒有空格或任何其他分隔符），我想填寫表單元格，直到單元格寬度（根據窗口大小而變化，在示例中設置爲50%）。我希望瀏覽器在命中表格單元格寬度時很難包裝字符串，但也歡迎字符串中的換行符。表格單元格中的內容應該具有給定的固定最小寬度（下例中爲200px），如果窗口進一步調整大小，應該會導致出現垂直滾動。這一刻，當窗口剛變得太小，我顯示在這個截圖：「前」填充字符與最小寬度和自動換行時大小

enter image description here

我以max-width爲td（playground）實現了FF10所需要的行爲，但我不能這樣做IE：它忽略max-width。當max-width被設置爲pre時：renderer忽略內容的實際寬度並認爲pre未被換行（playground-與FF相比;類似的問題報告爲here和there）。在最壞的情況下，可以將內容嚴格固定爲200px（對於IE應該應用於pre，對td應用一個不起作用）。爲了這個修復隻影響IE瀏覽器，我嘗試了以下CSS：

pre { 
    white-space: pre-wrap; 
    word-wrap: break-word; 
    width: expression("200px"); 
} 

td.wrap { 
    color: red; 
    max-width: 200px; 
}

不幸的是，不適用於IE8。目標瀏覽器：FF9（高於），IE7，IE8，Chrome（最新版）。

很抱歉，如果這個問題是一個重複：我已經檢查How do I wrap text in a pre tag?，How can I word wrap this list item?，Not able to do max width，Max-Width not working on Table for IE7和其他許多人：發現IE沒有明確的解決方案。

來源

2012-03-27 dma_k

我試圖從另一邊來解決問題:)用min-width: 400px圍繞在一個div中的表格，這使IE瀏覽器擁有。這是小提琴：http://jsfiddle.net/6Agbw/3/。希望這是你所需要的。

來源

2012-05-13 12:20:04

謝謝，它似乎工作。 P.S.您可以放心地刪除以前的答案。 – 2012-05-14 11:20:59

啊，你用桌子'table-layout：fixed'。我應該從操場中刪除它，因爲在這種情況下，當表格有多於兩列時會引起問題，請參閱[這裏]（http://jsfiddle.net/6Agbw/7/）。任何想法如何使這個工作？ – 2012-05-14 13:22:12

我能得到的最接近的是：http://jsfiddle.net/6Agbw/11/。請注意表中的。此外，我無法避免使用'table-layout：fixed'並且簡短地'td'文本。可能在這些'td'中旋轉文字可以幫助你。 – 2012-05-14 22:09:12

「前」填充字符與最小寬度和自動換行時大小

回答

相關問題