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

Question

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

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

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

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

Answer 1

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

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.columnA {
    width: 30%;
}
td.columnB {
    width: 70%;
}

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

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

Answer 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: ' ';
    visibility: hidden;
}
.ellipsis span {
    position: absolute;
    left: 0;
    right: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

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

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

Answer 5

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

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

Answer 6

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

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

https://jsfiddle.net/tturadqq/

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

---

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

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

---

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

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

---

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

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

---

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

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

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

---

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

И мы закончили!

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

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

Answer 9

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

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

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

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

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

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