文本溢出不能與HTML5一起使用

以下代碼在chrome上按照需要工作。但不是在Firefox或IE。將<!DOCTYPE html>標記添加到此代碼中，導致它不能在chrome上工作。有text-overflow已被棄用或什麼？我如何使它與所有瀏覽器和HTML5兼容？文本溢出不能與HTML5一起使用

<head> 

<style type='text/css'> 
table { 
    display: block; 
    margin: 30px 0 auto 0; 
    width: 100%; 
    max-width: 1300px; 
    text-align: left; 
    white-space: nowrap; 
    border-collapse: collapse; 
    z-index: -1; 
    table-layout:fixed; 
} 

td { 
    overflow: hidden; 
    white-space: nowrap; 
    word-wrap:break-word; 
    text-overflow:ellipsis; 
    border: 1px solid black; 
} 
</style> 
</head> 
<body> 
<table> 
    <tr> 
     <th style="width: 18%;">Col 1</th> 
     <th style="width: 12%;">Col 2</th> 
     <th style="width: 13%;">Col 3</th> 
     <th style="width: 7%">Col 4</th> 
     <th style="width: 7%">Col 5</th> 
     <th style="width: 6%">Col 6</th> 
     <th style="width: 5%">Col 7</th> 
     <th style="width: 13%">Col 8</th> 
     <th style="width: 16%">Col 9</th> 
     <th style="width: 3%">Col 10</th> 
    </tr> 
    <tr> 
     <td>Some</td> 
     <td>Data</td> 
     <td>Stuff</td> 
     <td>foo</td> 
     <td>bar</td> 
     <td>etc</td> 
     <td>whatever</td> 
     <td>stuff</td> 
     <td>Alotofdataikkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</td> 
     <td>Yes</td> 
    </tr> 
</table> 

</body>

這就是我想要的。 enter image description here

來源

2013-05-14 Optimus Prime

這個怎麼樣？ http://jsbin.com/okuqan/2/edit – Antony 2013-05-14 07:22:16

看看這裏http://stackoverflow.com/questions/9789723/css-text-overflow-in-a-table-cell – Morpheus 2013-05-14 07:22:26

它支持所有瀏覽器...你可以在這裏查看：http://www.w3schools.com/cssref/css3_pr_text-overflow.asp – 2013-05-14 07:22:47

您錯誤地使用了文本溢出屬性。

如果要包裝元素的文本，則必須指定該元素的寬度或最大寬度，以便瀏覽器知道如何包裝文本內容。

[EDITED] 這是示例代碼：

<head> 

<style type='text/css'> 
table { 
    display: block; 
    margin: 30px 0 auto 0; 
    /*width: 100%;*/ 
    max-width: 900px; 
    text-align: left; 
    white-space: nowrap; 
    border-collapse: collapse; 
    z-index: -1; 
    table-layout:fixed; 
} 

td { 
    overflow: hidden; 
    white-space: nowrap; 
    word-wrap:break-word; 
    text-overflow: ellipsis; 
    border: 1px solid black; 
} 

.col1 { 
    width: 80px; 
} 
.col7 { 
    max-width: 300px; 
} 
.col8 { 
    max-width: 300px; 
} 
</style> 
</head> 
<body> 
<table> 
    <tr> 
     <th class="col1">Col 1</th> 
     <th class="col2">Col 2</th> 
     <th class="col3">Col 3</th> 
     <th class="col4">Col 4</th> 
     <th class="col5">Col 5</th> 
     <th class="col6">Col 6</th> 
     <th class="col7">Col 7</th> 
     <th class="col8">Col 8</th> 
     <th class="col9">Col 9</th> 
     <th class="col10">Col 10</th> 
    </tr> 
    <tr> 
     <td class="col1">Some</td> 
     <td class="col2">Data</td> 
     <td class="col3">Stuff</td> 
     <td class="col4">foo</td> 
     <td class="col5">etc</td> 
     <td class="col6">whatever</td> 
     <td class="col7">stuff</td> 
     <td class="col8">Alotofdataikkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</td> 
     <td class="col9">Yes</td> 
     <td class="col10">bar</td> 
    </tr> 
    <tr> 
     <td class="col1">Some</td> 
     <td class="col2">Data</td> 
     <td class="col3">Stuff</td> 
     <td class="col4">foo</td> 
     <td class="col5">etc</td> 
     <td class="col6">whatever</td> 
     <td class="col8">Alotofdataikkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</td> 
     <td class="col7">stuff</td> 
     <td class="col9">Yes</td> 
     <td class="col10">bar</td> 
    </tr> 
</table> 

</body>

這裏是演示截圖： enter image description here

來源

2013-05-14 07:44:08 LiuLang

但如果我想設置所有列的最大寬度不同？ – 2013-05-14 13:08:40

使用類。像這樣：.col1 {max-width：16％;} col2 {max-width：20％;} ...和同一列中的td/th應該具有相同的類名。 – LiuLang 2013-05-15 03:10:39

將最大寬度添加到您的td。

td{ 
    overflow: hidden; 
    white-space: nowrap; 
    word-wrap:break-word; 
    text-overflow:ellipsis; 
    border: 1px solid black; 
    max-width: 50px; 
}

來源

2013-05-14 07:35:16 ChamingaD

text-overflow: ellipsis工作正常HTML5。我認爲display: block正在創造一些問題。嘗試刪除它或用display: table替換它，並檢查它是否工作。

來源

2013-05-14 08:16:21 qwerty

文本溢出不能與HTML5一起使用

回答

相關問題