CSS свойство text-overflow в ячейке таблицы?

Чтобы добавить текст с многоточием, когда он выходит за пределы ячейки таблицы, вам нужно установить свойство CSS max-width для каждого класса td, чтобы переполнение работало корректно. Дополнительные элементы div не требуются:

td {
 max-width: 100px;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

Для адаптивных макетов используйте свойство CSS max-width, чтобы указать эффективную минимальную ширину столбца, или просто задайте max-width: 0; для неограниченной гибкости. Также, у таблицы должен быть задана конкретная ширина, обычно это width: 100%;, а ширина столбцов обычно задается как процент от общей ширины таблицы:

table {width: 100%;}
td {
 max-width: 0;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
td.column_a {width: 30%;}
td.column_b {width: 70%;}

Историческая справка: Для IE 9 (и младше) вам нужно добавить следующий код в ваш HTML, чтобы устранить проблемы с отображением, специфичные для IE:

<!--[if IE]>
<style>
table {table-layout: fixed; width: 100px;}
</style>
<![endif]-->

Ваша проблема с тем, что установка max-width или фиксированной ширины не работает во всех ситуациях, вполне понятна. Зачастую таблицы должны быть гибкими и автоматически распределять пространство между ячейками, поскольку именно для этого они и предназначены. Приведённый вами код работает в IE9 и других браузерах.

Попробуйте использовать следующий код, который обеспечит нужное поведение:

Пример на jsFiddle

table {
    width: 100%;
}
.first {
    width: 50%;
}
.ellipsis {
    position: relative;
}
.ellipsis:before {
    content: ' ';
    visibility: hidden;
}
.ellipsis span {
    position: absolute;
    left: 0;
    right: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

И соответствующая разметка таблицы:

<table border="1">
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
            <th>Header 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="ellipsis first"><span>This Text Overflows and is too large for its cell.</span></td>
            <td class="ellipsis"><span>This Text Overflows and is too large for its cell.</span></td>
            <td class="ellipsis"><span>This Text Overflows and is too large for its cell.</span></td>
            <td class="ellipsis"><span>This Text Overflows and is too large for its cell.</span></td>
        </tr>
    </tbody>
</table>

Этот код устанавливает ширину таблицы в 100% и позволяет ячейкам автоматически подстраиваться под содержимое. При переполнении текста в ячейках используется стиль text-overflow: ellipsis;, который добавляет многоточие в конце слишком длинного текста. Таким образом, вы получаете необходимую гибкость и красивое отображение вашего контента.

Похоже, что если вы укажете table-layout: fixed; для элемента table, то ваши стили для td должны применяться. Однако это также будет влиять на размер ячеек.

На сайте Sitepoint обсуждаются методы настройки таблиц немного подробнее здесь:
http://reference.sitepoint.com/css/tableformatting

Если у вас таблица шириной в процентах или вы не можете установить фиксированную ширину для ячеек таблицы, вы можете применить стиль table-layout: fixed;, чтобы это заработало.

Вот пример кода:

table {
  table-layout: fixed;
  width: 100%;
}
td {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid red;
}

А вот пример HTML-разметки:

<table>
  <tr>
    <td>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</td>
    <td>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</td>
  </tr>
</table>

С помощью указанного CSS свойства table-layout: fixed; вы заставите таблицу использовать фиксированный способ расчета ширины столбцов. Обратите внимание, что при применении этого свойства ячейки будут равномерно распределены по доступной ширине таблицы. Также стоит отметить, что свойства text-overflow, white-space и overflow помогут вам обрезать длинный текст и добавить многоточие, если содержимое выходит за пределы ячейки.

Чтобы обернуть содержимое ячейки в flex-блок и обеспечить автоматическую подгонку ширины ячейки под видимое содержимое, вы можете использовать следующий подход:

1. Установите ширину таблицы на 100% для обеспечения правильной компоновки.
2. Используйте flex-контейнер в ячейке td, чтобы заставить дочерний элемент занимать всю доступную ширину.
3. Задайте дочернему элементу фиксированную ширину и уберите переполнение по оси X, добавив эффект многоточия.

Вот ваш исправленный код с комментариями по каждому элементу:

table {
  width: 100%; /* Таблица занимает 100% ширины контейнера */
}

div.parent {
  display: flex; /* Устанавливаем flex-контейнер для родительского элемента */
}

div.child {
  flex: 1; /* Дочерний элемент будет занимать всю доступную ширину */
  width: 1px; /* Небольшая ширина для управления переполнением */
  overflow-x: hidden; /* Прячет лишний контент по оси X */
  text-overflow: ellipsis; /* Добавляет многоточие при переполнении текста */
}

<table>
  <tr>
    <td>
      <div class="parent">
        <div class="child">
          xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        </div>
      </div>
    </td>
  </tr>
</table>

В этом примере div.parent обеспечивает гибкость, а div.child управляет поведением текста внутри ячейки. Таким образом, текст будет обрезаться с использованием многоточия, и ширина ячейки будет автоматически подстраиваться под видимый контент.