Text-overflow: многоточие в таблице-ячейке без ширины

Ответ 1

Это не очень чистое решение, но оно не использует JS и работает в каждом браузере, который я тестировал.

Мое решение состоит в том, чтобы обернуть содержимое ячейки внутри таблицы с помощью table-layout: fixed и width: 100%.

Смотрите демонстрацию .

Здесь полное решение:

<table class="main-table">
    <tr>
        <td class="nowrap">Button 1</td>
        <td>
            <table class="fixed-table">
                <tr>
                    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus doloremque magni illo reprehenderit consequuntur quia dicta labore veniam distinctio quod iure vitae porro nesciunt. Minus ipsam facilis! Velit sapiente numquam.</td>
                </tr>
            </table>
        </td>
        <td class="nowrap">Button 2</td>
    </tr>
</table>

.main-table {
    width: 100%;
}

.fixed-table {
    /* magic */
    width: 100%;
    table-layout: fixed;

    /*not really necessary, removes extra white space */
    border-collapse: collapse;
    border-spacing: 0;
    border: 0;
}
.fixed-table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nowrap {
    /* used to keep buttons' text in a single line,
     * remove this class to allow natural line-breaking.
     */
    white-space: nowrap;
}

Не совсем понятно, какие намерения для боковых кнопок, поэтому я использовал white-space: nowrap, чтобы держать их в одной строке. В зависимости от варианта использования вы можете предпочесть применить min-width и дать им естественный отрыв.

Ответ 2

Установите 100% -ную ширину в таблице и укажите таблицу fixed table-layout:

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

Затем задайте следующее для каждой ячейки таблицы, которая должна иметь многоточие:

td:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Voila! Отзывчивая таблица с переполнением многоточия!

Демо: http://jsfiddle.net/VyxES/

Ответ 3

HTML

<tr>
    <td>
        <span class="ellipsis"> A very looooooooooooooooooooooooooooooong string</span>
    </td>
</tr>

CSS

td {
    position: relative;
}

.ellipsis {
    /*Here is the trick:*/
    position: absolute;
    width: 100%;
    /*End of the trick*/

    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

Ответ 4

Чистым способом было бы просто установить максимальную ширину на td.

Основываясь на ответе @Fabrício Matté,

http://jsfiddle.net/V83Ae/89/

<table class="main-table">
<tr>
    <td class="nowrap">Button 1</td>
    <td class="truncate">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus doloremque magni illo reprehenderit consequuntur quia dicta labore veniam distinctio quod iure vitae porro nesciunt. Minus ipsam facilis! Velit sapiente numquam.</td>
    <td class="nowrap">Button 2</td>
</tr>

и

body { margin: 0; }

.main-table {
    width: 100%;
}

.truncate {
    text-overflow: ellipsis;
    white-space  : nowrap;
    overflow     : hidden;
    max-width    : 100px; /* Can be any size, just small enough */
}

.nowrap {
    white-space: nowrap;
}

Я понятия не имею, почему это работает, но это так, поэтому, если кто-то может понять, почему использование макс-ширины работает, пожалуйста, сообщите мне, как я сделал это случайно.

Ответ 5

После того, как я ударил головой по часам, без решения, которое сработало, наконец нашел его.

Элемент, который вы хотите для основания переполнения, имеет минимальную/максимальную ширину, где max меньше минимальной ширины. Затем вы можете переполнить lement или его дочерний элемент, где вы можете установить его любым способом:%, px, auto.

Я попробовал его в более чем одной сложной ситуации, и он работает на всех.

Я попытаюсь опубликовать чарт с моими примерами, но это должно помочь вам.

/* Apply on base element for proper overflow */
max-width: 1px;
min-width: 10000px;

/* Apply on self or child, according to need */
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

Ответ 6

[обновление] Мои извинения, похоже, не работают "просто так": http://jsfiddle.net/kQKfc/1/

Оставь его здесь, потому что в некоторых ситуациях он делает трюк для нас.
[/Обновление]

У нас есть этот css в нашем проекте, сделайте снимок:

.nowr
{
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Ответ 7

Здесь вы переходите

<div class="container">
  <div>
    Button 1
  </div>
  <div class="fill">
    <div class="lockText">
      A one-lined text that is too long and has to be...
    </div>
  </div>
  <div>
    Button 2
  </div>
</div>

Трюк заключается в том, чтобы настроить макет таблицы с ячейкой, которая сначала занимает оставшееся пространство (таблицы css, заметьте!).

.container {
  display: table;
  width: 100%;
}

.container > div {
  display: table-cell;
  white-space: nowrap;
  position : relative;
  width : auto;

  /*make it easier to see what going on*/
  padding : 2px;
  border : 1px solid gray;
}

.container > .fill {
  width : 100%;
}

Затем добавьте свой текст, который сдерживает себя.

.lockText {
  position : absolute;
  left : 0;
  right : 0;
  overflow: hidden;
  text-overflow: ellipsis;
}