当使用CSS自动进行列和表布局时，如何在表th或td中设置断字

Question

我希望这很简单。

我想为表保留table-layout：auto，因为这可以使“名称”列的大小合适，而url列会占用剩余的空间。

问题是当url列变大时，表的大小会自动超过宽度。

理想情况下，一旦溢出超出所包含的div的大小，我想将其隐藏在“ url”列上。

在Jsfiddle示例中，您可以看到第一个表的大小很好，“名称”列占用了可用空间。

在第二个表中，由于“ url”列中的文本，它超出了其包含的div。 我不能锻炼如何隐藏此溢出。

<!DOCTYPE html>
<html>
<head>
    <title>Table Test</title>

    <style>
        table {
            table-layout:auto;
        }
        table, th, td
        {
            text-align:left;
            white-space:nowrap;
            text-overflow:ellipsis;
        }


    </style>

    </head>

<div style="width:400px; border: 1px solid red; background-color:lightgrey;">
    <table>
        <thead>
            <tr><th>Status</th><th style="width:100%">Name</th><th style="width:100%">Url</th></tr>
         </thead>
         <tbody>
            <tr><td>On</td><td>Fred</td><td>http://www.google.com</td></tr>
            <tr><td>On</td><td>Fred long long long name</td><td>http://www.google.com</td></tr>
            <tr><td>On</td><td>Fred</td><td>http://www.google.com</td></tr>
            <tr><td>On</td><td>Fred</td><td>http://www.google.com</td></tr>
            <tr><td>On</td><td>Fred</td><td>http://www.google.com</td></tr>
            <tr><td>On</td><td>Fred</td><td>http://www.google.com</td></tr>
            <tr><td>On</td><td>Fred</td><td>http://www.google.com/xxxxxx    </td></tr>
        </tbody>
    </table> 
 </div>
 </div>

 <p/>

<div style="width:400px; border: 1px solid red; background-color:lightgrey;">
    <table>
        <thead>
            <tr><th>Status</th><th style="width:100%">Name</th><th style="width:100%">Url</th></tr>
         </thead>
         <tbody>
            <tr><td>On</td><td>Fred</td><td>http://www.google.com</td></tr>
            <tr><td>On</td><td>Fred long long long name</td><td>http://www.google.com</td></tr>
            <tr><td>On</td><td>Fred</td><td>http://www.google.com</td></tr>
            <tr><td>On</td><td>Fred</td><td>http://www.google.com</td></tr>
            <tr><td>On</td><td>Fred</td><td>http://www.google.com</td></tr>
            <tr><td>On</td><td>Fred</td><td>http://www.google.com</td></tr>
            <tr><td>On</td><td>Fred</td><td>http://www.google.com/xxxxxxxxxxxxxxxxxxxxxxx</td></tr>
        </tbody>
    </table> 
 </div>
</body>
</html>

Answer 1

您的div包装器正在显示溢出。 添加隐藏的溢出。 小提琴

div{
  overflow: hidden;   
}

Answer 2

我曾经用过，这只是工作集的table-layout: fixed是使它起作用的关键。

word-wrap: break-word;
word-break: break-all;
table-layout: fixed;

检查此jsFiddle帮助您

编辑已更新

检查这个JsFiddle

删除您的内联样式，现在您的CSS是

table {
    table-layout:auto;
}
table, th, td
{
    text-align:left;
    word-break:break-all;
}

Answer 3

如果您想在悬停时显示完整的网址，可以这样尝试：

小提琴- 小提琴链接！

的HTML

<td>
    <span>http://reallylongstring.com</span>
</td>

的CSS

span {
    width: 200px;
    overflow: hidden;
    display: block;
}
span:hover {
    overflow: initial;
}

Answer 4

由于您为div了固定的宽度，因此只需添加overflow:hidden; 样式，并且不会显示表格中的溢出内容。

JSFiddle： http : //jsfiddle.net/ginovva320/CFbKR/

当使用CSS自动进行列和表布局时，如何在表th或td中设置断字

问题描述

4 个解决方案

解决方案1
1 2014-03-12 04:40:19

解决方案2
1 2014-03-12 04:43:13

编辑已更新

解决方案3
1 2014-03-12 04:48:08

解决方案4
0 已采纳 2014-03-12 04:44:24

当使用CSS自动进行列和表布局时，如何在表th或td中设置断字

问题描述

4 个解决方案

解决方案1 1 2014-03-12 04:40:19

解决方案2 1 2014-03-12 04:43:13

编辑已更新

解决方案3 1 2014-03-12 04:48:08

解决方案4 0 已采纳 2014-03-12 04:44:24

解决方案1
1 2014-03-12 04:40:19

解决方案2
1 2014-03-12 04:43:13

解决方案3
1 2014-03-12 04:48:08

解决方案4
0 已采纳 2014-03-12 04:44:24