流量表与td nowrap & text overflow?

Here is my problem HTML:

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

Here is what I wanted:

这就是我想要的:

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

That is:

那就是:

No horizontal scroll bars
没有水平滚动条
div do not make the table and td so wide
div不要把桌子和td弄得太宽
resizing browser window makes the div dynamic change of ellipsis
调整浏览器窗口的大小使div动态地改变了省略号

btw, anyway to minic text-overflow on Firefox?

顺便说一句，火狐上的minic文字溢出?

4 个解决方案

#1

Edit: fixed this myself using CSS:

编辑:我自己用CSS修复这个:

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

#2

Rather than using table-layout: fixed; for your table, you can use this trick to get a DIV to always take up the full space of a TD with text-overflow: ellipsis; functionality:

而不是使用表格布局:固定;对于您的表，您可以使用这个技巧来获得一个DIV，它总是占用TD的整个空间，其中包含文本溢出:省略号;功能:

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

The main trick is giving the width something other than auto/percent, and using a min-width of 100%;

主要的技巧是，除了自动/百分数之外，还要给宽度设置一个最小的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; }

The table can be fluid sized or fixed width. Just give some min-widths for contents as needed.

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

<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

#3

My full example :

我的完整的示例:

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

#4

for me,

对我来说,

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

worked...

工作……

#1