文本溢出不能与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一起使用

回答

相关问题