流体表与td nowrap和文本溢出？

Question

流体表与td nowrap和文本溢出？

这是我的问题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>

Run Code Online (Sandbox Code Playgroud)

这就是我想要的:

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

Run Code Online (Sandbox Code Playgroud)

那是:

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

顺便说一句,无论如何text-overflow在Firefox 上迷你？

Answer 1

est*_*est 56

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

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

Run Code Online (Sandbox Code Playgroud)

Answer 2

Mar*_*ark 24

table-layout: fixed;您可以使用此技巧让DIV始终占用TD的全部空间,而不是用于您的桌子text-overflow: ellipsis;:

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

Run Code Online (Sandbox Code Playgroud)

主要技巧是给出除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; }

Run Code Online (Sandbox Code Playgroud)

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

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

Run Code Online (Sandbox Code Playgroud)

的jsfiddle

这对我来说非常有效，并且感觉比“表格布局：固定”解决方案更灵活（我不喜欢必须为每列设置宽度的约束）。谢谢。 (2认同)

Answer 3

小智 5

我的完整例子：

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，9 月前
查看次数：	36924 次
最近记录：	7 年，12 月前