Question

这是我的问题HTML：

<table style="width:100%">
  <tr>
    <td style="width:100%;overflow:hidden">
      <div style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long
      </div>
    </td>
  </tr>
</table>

这是我想要的：

<div style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%">long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long
</div>

那是：

没有水平滚动条
div不要使table和td如此宽
调整浏览器窗口大小，div动态更改为ellipsis

btw，无论如何要在Firefox上迷你text-overflow？

Answer 1

编辑：使用CSS修复此问题：

table { table-layout:fixed; width:100%; }

Answer 2

您可以使用此技巧让DIV始终占用具有table-layout: fixed;功能的TD的完整空间，而不是将text-overflow: ellipsis;用于您的表格：

div { width: 0; min-width: 100%; }

主要技巧是给出宽度除auto / percent以外的其他东西，并使用最小宽度100％;

div { width: 0; min-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.myTable { width: 100%; border-collapse: collapse; }
td { border: 1px solid #000; }

td.td1 { width: 100%; min-width: 50px; }
td.td2 { width: 100px; min-width: 100px; }
td.td3 { width: 150px; min-width: 150px; }

td.td4 { width: 50%; min-width: 50px; }
td.td5 { width: 50%; min-width: 50px; }
td.td6 { width: 150px; min-width: 150px; }

桌子可以是流体尺寸或固定宽度。只需根据需要为内容提供一些最小宽度。

<table class="myTable">
    <tr>
        <td class="td1"><div>Very very very long text Very very very long text Very very very long text Very very very long text</div></td>
        <td class="td2"><div>Content 2</div></td>
        <td class="td3"><div>Content 3 also so very lonnnnngggg</div></td>
    </tr>
</table>

<table class="myTable">
    <tr>
        <td class="td4"><div>Very very very long text Very very very long text Very very very long text Very very very long text</div></td>
        <td class="td5"><div>Content 2 has very very very many texts in a very very very long way</div></td>
        <td class="td6"><div>Content 3</div></td>
    </tr>
</table>

JSfiddle

Answer 3

我的完整例子：

<head>
    <style>
        table {
            width:100%;
            table-layout:fixed;
        }
        td {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <td>CHAMPIONNAT</td>
            <td>CHAMPIONNAT</td>
            <td>CHAMPIONNAT</td>
            <td>CHAMPIONNAT</td>
            <td>CHAMPIONNAT</td>
            <td>CHAMPIONNAT</td>
        </tr>
    </table>
</body>

Answer 4

对我来说，

<style type='text/css'>
table {
 white-space: normal;
}
</style>

...工作

流体台与td nowrap＆amp;文本溢出？

4 个答案: