Переполнение текста CSS в ячейке таблицы?

Я хочу использовать CSS text-overflowв ячейке таблицы, так что если текст слишком длинный, чтобы поместиться в одну строку, он будет обрезаться многоточием вместо переноса на несколько строк. Это возможно?

Я попробовал это:

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

Но white-space: nowrapкажется, что текст (и его ячейка) постоянно расширяются вправо, увеличивая общую ширину таблицы за пределы ширины контейнера. Без этого, однако, текст продолжает переноситься на несколько строк, когда он достигает края ячейки.

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

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

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

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

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

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

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

Используйте это: http://jsfiddle.net/maruxa1j/

HTML:

<td class="ellipsis">
    <span>This Text Overflows and is too large for its cell.</span>
</td>

CSS:

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

Работает на IE9 и других браузерах.

Почему это происходит?

Кажется, этот раздел на w3.org предполагает, что переполнение текста применяется только к элементам блока :

11.1.  Overflow Ellipsis: the ‘text-overflow’ property

text-overflow      clip | ellipsis | <string>  
Initial:           clip   
APPLIES TO:        BLOCK CONTAINERS               <<<<
Inherited:         no  
Percentages:       N/A  
Media:             visual  
Computed value:    as specified  

MDN говорит то же самое .

В этом jsfiddle есть ваш код (с несколькими отладочными модификациями), который отлично работает, если он применяется divвместо a td. Он также имеет единственный обходной путь, о котором я мог быстро подумать, заключив содержимое tdв содержащий divблок. Тем не менее, это выглядит для меня как «уродливая» разметка, поэтому я надеюсь, что у кого-то есть лучшее решение. Код для проверки выглядит следующим образом:

td, div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid red;
  width: 80px;
}

Works, but no tables anymore:
<div>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.</div>

Works, but non-semantic markup required:
<table><tr><td><div>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.</div></td></tr></table>

Если вы не хотите устанавливать фиксированную ширину

Решение ниже позволяет вам иметь содержимое ячейки таблицы, которое является длинным, но не должно влиять ни на ширину родительской таблицы, ни на высоту родительской строки. Например, если вы хотите иметь таблицу, в width:100%которой все еще применяется функция авторазмера для всех других ячеек. Полезно в сетках данных с колонками «Примечания» или «Комментарий» или чем-то еще.

Добавьте эти 3 правила в свой CSS:

.text-overflow-dynamic-container {
    position: relative;
    max-width: 100%;
    padding: 0 !important;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    vertical-align: text-bottom !important;
}
.text-overflow-dynamic-ellipsis {
    position: absolute;
    white-space: nowrap;
    overflow-y: visible;
    overflow-x: hidden;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    max-width: 100%;
    min-width: 0;
    width:100%;
    top: 0;
    left: 0;
}
.text-overflow-dynamic-container:after,
.text-overflow-dynamic-ellipsis:after {
    content: '-';
    display: inline;
    visibility: hidden;
    width: 0;
}

Отформатируйте HTML следующим образом в любой ячейке таблицы, если вы хотите динамическое переполнение текста:

<td>
  <span class="text-overflow-dynamic-container">
    <span class="text-overflow-dynamic-ellipsis" title="...your text again for usability...">
      //...your long text here...
    </span>
  </span>
</td>

Дополнительно примените желаемый min-width(или ни один вообще) к ячейке таблицы.

Конечно скрипка: https://jsfiddle.net/9wycg99v/23/

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

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

Если вы просто хотите, чтобы таблица автоматически разметилась

Без использования max-width, или процентной ширины столбца, и table-layout: fixedт. Д.

https://jsfiddle.net/tturadqq/

Как это работает:

Шаг 1: Просто дайте автоматическому расположению таблицы сделать свое дело.

Если в одном или нескольких столбцах много текста, остальные столбцы будут максимально уменьшены, а затем обернут текст длинных столбцов:

Шаг 2. Оберните содержимое ячейки в div, затем установите для этого div значение max-height: 1.1em

(дополнительные 0.1em предназначены для символов, которые визуализируются чуть ниже текстовой основы, например хвоста 'g' и 'y')

Шаг 3: Установите titleна divs

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

Шаг 4: Добавьте CSS ::afterна div

Это сложный момент. Мы устанавливаем CSS ::afterс помощью content: attr(title), затем помещаем его поверх div и устанавливаем text-overflow: ellipsis. Я покрасил его в красный цвет, чтобы было понятно.

(Обратите внимание, что длинный столбец теперь имеет многоточие)

Шаг 5: Установите цвет текста div на transparent

И мы сделали!

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

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

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

Оберните содержимое ячейки в гибкий блок. В качестве бонуса, ячейка автоматически соответствует видимой ширине.

table {
  width: 100%;
}

div.parent {
  display: flex;
}

div.child {
  flex: 1;
  width: 1px;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

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

Я решил это, используя абсолютно позиционированный div внутри ячейки (относительный).

td {
    position: relative;
}
td > div {
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;        
}

Вот и все. Затем вы можете либо добавить top: value к div, либо расположить его вертикально по центру:

td > div {      
    top: 0;
    bottom: 0;
    margin: auto 0;
    height: 1.5em; // = line height 
}

Чтобы получить пространство справа, вы можете немного уменьшить максимальную ширину.

В моем случае это работало как в Firefox, так и в Chrome:

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

Это версия, которая работает в IE 9.

http://jsfiddle.net/s27gf2n8/

<div style="display:table; table-layout: fixed; width:100%; " >
        <div style="display:table-row;">
            <div style="display:table-cell;">
                <table style="width: 100%; table-layout: fixed;">
                    <div style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">First row. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
                </table>
            </div>
            <div style="display:table-cell;">
                Top right Cell.
            </div>
        </div>
        <div style="display:table-row;">
            <div style="display:table-cell;">
                <table style="width: 100%; table-layout: fixed;">
                    <div style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Second row - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
                </table>
            </div>
            <div style="display:table-cell;">
                Bottom right cell.
            </div>
        </div>
    </div>