Переповнення тексту 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а 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,1ем призначені для символів, які відображають трохи нижче текстової бази, наприклад, хвіст 'g' та 'y')

Крок 3: Встановіть titleдіви

Це добре для доступності та необхідне для маленької хитрості, яку ми використаємо за мить.

Крок 4: Додайте CSS ::afterу діві

Це хитрий біт. Ми встановлюємо CSS ::after, з content: attr(title), а потім розміщуємо його над ділом і встановлюємо text-overflow: ellipsis. Я забарвив його тут червоним, щоб було зрозуміло.

(Зверніть увагу, як довгий стовпчик тепер має хвостовий еліпсис)

Крок 5: Встановіть колір тексту ділення 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>