Я хочу использовать CSS text-overflow
в ячейке таблицы, так что если текст слишком длинный, чтобы поместиться в одну строку, он будет обрезаться многоточием вместо переноса на несколько строк. Это возможно?
Я попробовал это:
td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Но white-space: nowrap
кажется, что текст (и его ячейка) постоянно расширяются вправо, увеличивая общую ширину таблицы за пределы ширины контейнера. Без этого, однако, текст продолжает переноситься на несколько строк, когда он достигает края ячейки.
overflow
хорошо. Попробуйте поместить div в ячейку и стилизовать этот div.Ответы:
Чтобы обрезать текст многоточием при переполнении ячейки таблицы, вам необходимо установить
max-width
свойство CSS для каждогоtd
класса, чтобы переполнение работало. Никаких дополнительных элементов макета не требуетсяДля адаптивных макетов; используйте
max-width
свойство CSS, чтобы указать эффективную минимальную ширину столбца, или просто используйтеmax-width: 0;
для неограниченной гибкости. Кроме того, содержащей таблице обычно требуется определенная ширина,width: 100%;
и столбцы, как правило, имеют ширину, заданную в процентах от общей ширины.Историческая справка: для IE 9 (или менее) вам необходимо иметь это в своем HTML, чтобы исправить специфическую для IE проблему отрисовки
источник
width: 100%;
иmin-width: 1px;
ячейка всегда будет максимально широкой и будет использовать многоточие только для усечения текста, когда это необходимо (а не когда ширина элемента достигает определенного размера) - это очень полезно для адаптивных макетов.display: table-cell
действительно работает , но не тогда, когдаmax-width
он определен в процентах (%). Проверено на FF 32table-layout: fixed
элемента сdisplay: table
добьется целиУказание
max-width
или фиксированной ширины не работает для всех ситуаций, и таблица должна быть плавной и автоматически расставлять ячейки. Вот для чего нужны столы.Используйте это: http://jsfiddle.net/maruxa1j/
HTML:
CSS:
Работает на IE9 и других браузерах.
источник
<span>
элементы.display: block
этого не сделалиПочему это происходит?
Кажется, этот раздел на w3.org предполагает, что переполнение текста применяется только к элементам блока :
MDN говорит то же самое .
В этом jsfiddle есть ваш код (с несколькими отладочными модификациями), который отлично работает, если он применяется
div
вместо atd
. Он также имеет единственный обходной путь, о котором я мог быстро подумать, заключив содержимоеtd
в содержащийdiv
блок. Тем не менее, это выглядит для меня как «уродливая» разметка, поэтому я надеюсь, что у кого-то есть лучшее решение. Код для проверки выглядит следующим образом:источник
Если вы не хотите устанавливать фиксированную ширину
Решение ниже позволяет вам иметь содержимое ячейки таблицы, которое является длинным, но не должно влиять ни на ширину родительской таблицы, ни на высоту родительской строки. Например, если вы хотите иметь таблицу, в
width:100%
которой все еще применяется функция авторазмера для всех других ячеек. Полезно в сетках данных с колонками «Примечания» или «Комментарий» или чем-то еще.Добавьте эти 3 правила в свой CSS:
Отформатируйте HTML следующим образом в любой ячейке таблицы, если вы хотите динамическое переполнение текста:
Дополнительно примените желаемый
min-width
(или ни один вообще) к ячейке таблицы.Конечно скрипка: https://jsfiddle.net/9wycg99v/23/
источник
max-width: X
они теперь могут быть шире - я думал, что это из-заdisplay: flex
использования, но я удалил это и не вижу разницы ...Кажется, что если вы указываете
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
И мы сделали!
источник
<a>
вместо<div>
внутренней ячейки таблицы. Добавлениеword-break: break-all;
решает проблему. Пример: jsfiddle.net/de0bjmqvКогда это в процентах ширины таблицы, или вы не можете установить фиксированную ширину в ячейке таблицы. Вы можете обратиться,
table-layout: fixed;
чтобы заставить это работать.источник
Оберните содержимое ячейки в гибкий блок. В качестве бонуса, ячейка автоматически соответствует видимой ширине.
источник
white-space: nowrap;
вchild
класс.Я решил это, используя абсолютно позиционированный div внутри ячейки (относительный).
Вот и все. Затем вы можете либо добавить top: value к div, либо расположить его вертикально по центру:
Чтобы получить пространство справа, вы можете немного уменьшить максимальную ширину.
источник
В моем случае это работало как в Firefox, так и в Chrome:
источник
Это версия, которая работает в IE 9.
http://jsfiddle.net/s27gf2n8/
источник