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

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

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

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

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

Ответ 1

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

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

Ответ 2

Задание 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 и других браузерах.

Ответ 3

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

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

Ответ 4

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

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

Ответ 5

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

Sitepoint немного обсуждает методы табличного макета: http://reference.sitepoint.com/css/tableformatting

Ответ 6

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

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

И все готово!

Ответ 7

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

Ответ 8

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

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>

Ответ 9

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

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

Ответ 10

Это версия, которая работает в 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 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 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>