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

501

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

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

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

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

daGUY
источник
9
Ячейки таблицы не справляются overflowхорошо. Попробуйте поместить div в ячейку и стилизовать этот div.
Мистер Листер

Ответы:

898

Чтобы обрезать текст многоточием при переполнении ячейки таблицы, вам необходимо установить 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]-->
TFD
источник
7
Таблица также нуждается в ширине, чтобы это работало в IE. jsfiddle.net/rBthS/69
Тревор Диксон
1
Если вы установите, width: 100%;и min-width: 1px;ячейка всегда будет максимально широкой и будет использовать многоточие только для усечения текста, когда это необходимо (а не когда ширина элемента достигает определенного размера) - это очень полезно для адаптивных макетов.
Дункан Уокер,
2
@OzrenTkalcecKrznaric он display: table-cellдействительно работает , но не тогда, когда max-widthон определен в процентах (%). Проверено на FF 32
Грег
14
(В соответствии с вышеизложенным) в случае, если вы используете% значения, то только использование table-layout: fixedэлемента с display: tableдобьется цели
Greg
1
Как насчет того, если вы хотите, чтобы ширина столбцов автоматически назначалась в адаптивном режиме, таком как таблица с начальной загрузкой? установка максимальной ширины будет мешать этому. Есть ли обходной путь?
Гнездо
81

Указание 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: '&nbsp;';
    visibility: hidden;
}
.ellipsis span {
    position: absolute;
    left: 0;
    right: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

AnthumChris
источник
Примечание: это решение оборачивает содержимое ячейки в <span>элементы.
Рой Тинкер
2
Это действительно умное решение, которое хорошо работает для всех таблиц, для которых мне нужно решение. Однако вам необходимо установить ширину, если вы не хотите, чтобы все ячейки таблицы были одинаковой ширины.
Кевин Бил
Когда нет фиксированной ширины, это решение работает лучше всего. Очень умный действительно!
avidenic
1
Это сохраняет выравнивание по вертикали, когда другие решения вроде display: blockэтого не сделали
j3ff
Просто лучшее решение! Довольно гениально. Огромное спасибо.
ClownCoder
39

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

Кажется, этот раздел на 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>

Йерун
источник
2
Здорово спасибо Я не мог удалить ячейки таблицы из моей разметки, поэтому вместо этого я просто обернул содержимое в div (с их шириной, равной ширине ячеек) и вместо этого применил переполнение. Работал как шарм!
daGUY
28

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

Решение ниже позволяет вам иметь содержимое ячейки таблицы, которое является длинным, но не должно влиять ни на ширину родительской таблицы, ни на высоту родительской строки. Например, если вы хотите иметь таблицу, в 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/

Alph.Dev
источник
Самый полезный ответ: динамический эллипс просто потрясающий.
lucifer63
Он портит выбранные пределы ширины каждого столбца, например, если у вас есть определенные столбцы, поскольку max-width: Xони теперь могут быть шире - я думал, что это из-за display: flexиспользования, но я удалил это и не вижу разницы ...
user9645
24

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

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

jongala
источник
2
Это должен быть правильный ответ, если вы не хотите указывать ширину таблицы.
Adriaan
20

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

Без использования 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

И мы сделали!

введите описание изображения здесь

Кэмерон Прайс-Остин
источник
2
Это потрясающее и идеальное решение! Интересно, почему за большинство проголосовали против, а не против?
Зенду
2
Крутой мужик! (@ user9645 - это не правильно: пусть он работает с таблицей, отображаемой с помощью Vue.js - обязательно поместите заголовки в div, а не в td)
Christian Opitz
@ChristianOpitz - Да, я, должно быть, как-то все испортил ... повторил попытку, и она работает.
user9645
Я заметил, что этот подход дает сбой при использовании <a>вместо <div>внутренней ячейки таблицы. Добавление word-break: break-all;решает проблему. Пример: jsfiddle.net/de0bjmqv
zendu
Просто прекрасно. И вам даже не нужно иметь один и тот же текст в ячейках (достаточно заголовков), а затем вам не нужна max-height: 1.1em и т. Д. - все, что вам нужно для div, это position :lative ;.
KS74
13

Когда это в процентах ширины таблицы, или вы не можете установить фиксированную ширину в ячейке таблицы. Вы можете обратиться, 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>

Наклейки
источник
5

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

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>

сокр
источник
3
Я также должен был добавить white-space: nowrap;в childкласс.
Росс Аллен
3

Я решил это, используя абсолютно позиционированный 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 
}

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

Кжетил Хансен
источник
было бы неплохо с JSFiddle, как и многие другие ответы на этот популярный вопрос.
OMA
Да, это работает, но я использовал немного другие стили для divs: left: 0; top: 0; right: 0; bottom: 0; padding: 2px; чтобы получить правильную позицию и иметь такое же заполнение, как в ячейках таблицы.
KS74
0

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

td {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
user1338062
источник
-5

Это версия, которая работает в 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>
Райан О'Коннелл
источник
6
<div> как прямой потомок <table>? Это не кажется правильным!
Михель
@michiel FYI - браузеры могут обрабатывать теги ниже тегов таблицы.
Райан О'Коннелл