文本溢出不适用于 HTML5 [重复]答案

【问题标题】：text-overflow not working with HTML5 [duplicate]文本溢出不适用于 HTML5 [重复]
【发布时间】：2013-05-08 09:06:05
【问题描述】：

以下代码可在 chrome 上按需要运行。但不是在 Firefox 或 IE 上。在此代码中添加 <!DOCTYPE html> 标记，导致它也无法在 chrome 上运行。 text-overflow 被弃用了吗？如何使它与所有浏览器和 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>

这就是我想要的。

【问题讨论】：

这个怎么样？ jsbin.com/okuqan/2/edit
看这里stackoverflow.com/questions/9789723/…
所有浏览器都支持...你可以在这里查看：w3schools.com/cssref/css3_pr_text-overflow.asp
@Antony wow...谢谢你！

标签： css html

【解决方案1】：

您误用了 text-overflow 属性。

如果要换行元素的文本，则必须指定该元素的宽度或最大宽度，以便浏览器知道如何换行文本内容。

[已编辑] 这是示例代码：

<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>

这里是演示截图：

【讨论】：

但是如果我想以不同方式设置所有列的最大宽度？
使用类。像这样： .col1 { max-width: 16%;} col2 { max-width: 20%;} ... 并且同一列中的 td/th 应该具有相同的类名。

【解决方案2】：

text-overflow: ellipsis 在 HTML5 中运行良好。我认为display: block 正在制造一些问题。尝试删除它或将其替换为 display: table 并检查它是否有效。

【讨论】：

【解决方案3】：

将最大宽度添加到您的 td。

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

【讨论】：