Текущая таблица с 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>

Вот что я хотел:

<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, так или иначе, чтобы minic text-overflow в Firefox?

Ответ 1

Изменить: исправлено это с помощью CSS:

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

Ответ 2

Вместо использования table-layout: fixed; для вашей таблицы вы можете использовать этот трюк, чтобы получить DIV, чтобы всегда занимать полное пространство TD с помощью функции text-overflow: ellipsis;:

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

Основной трюк дает ширина что-то иное, чем auto/percent, и использование min-width 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

Ответ 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>

Ответ 4

для меня,

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

работал...