CSS: Обрізати клітинки таблиці, але максимально вмістити

Знайомтесь з Фредом. Він стіл:

<table border="1" style="width: 100%;">
    <tr>
        <td>This cells has more content</td>
        <td>Less content here</td>
    </tr>
</table>

Квартира Фреда має химерну звичку змінювати розміри, тому він навчився приховувати частину свого вмісту, щоб не штовхати всі інші осередки і відштовхувати віталь місіс Вітфорд у небуття:

<table border="1" style="width: 100%; white-space: nowrap; table-layout: fixed;">
    <tr>
        <td style="overflow: hidden; text-overflow: ellipsis">This cells has more content</td>
        <td style="overflow: hidden; text-overflow: ellipsis">Less content here</td>
    </tr>
</table>

Це спрацьовує, але у Фреда виникає неприємне відчуття, що якби його права клітина (яку він прозвав Celldito) дала трохи місця, його ліва клітина не була б укорочена стільки часу. Чи можете ви зберегти його розум?

Підсумовуючи: Як клітини таблиці можуть переповнюватися рівномірно, і лише тоді, коли всі вони відмовилися від усього пробілу?

<table border="1" style="width: 100%;">
    <colgroup>
        <col width="100%" />
        <col width="0%" />
    </colgroup>
    <tr>
        <td style="white-space: nowrap; text-overflow:ellipsis; overflow: hidden; max-width:1px;">This cell has more content.This cell has more content.This cell has more content.This cell has more content.This cell has more content.This cell has more content.</td>
        <td style="white-space: nowrap;">Less content here.</td>
    </tr>
</table>

http://jsfiddle.net/7CURQ/

Я вважаю, що у мене є рішення без JavaScript! Краще пізно, ніж ніколи, правда? Зрештою, це відмінне запитання, і Google все на цьому. Я не хотів погоджуватися на виправлення javascript, оскільки я вважаю, що незначне тремтіння речей, що рухаються після завантаження сторінки, є неприйнятним.

Особливості :

• Немає JavaScript
• Немає фіксованої верстки
• Ніяких хитрощів із зважуванням чи відсотковою шириною
• Працює з будь-якою кількістю стовпців
• Просте покоління на сервері та оновлення на стороні клієнта (не потрібен розрахунок)
• Сумісний веб-браузер

Як це працює : Всередині комірки таблиці розмістіть дві копії вмісту у двох різних елементах у відносно розташованому елементі контейнера. Роздільний елемент розташований статично і як такий впливатиме на ширину комірок таблиці. Дозволяючи загортати вміст розпірної комірки, ми можемо отримати "найкраще" ширину комірок таблиці, які ми шукаємо. Це також дозволяє нам використовувати абсолютно позиціонований елемент для обмеження ширини видимого вмісту до ширини відносно розташованого батька.

Тестували та працювали в: IE8, IE9, IE10, Chrome, Firefox, Safari, Opera

Зображення результатів :

JSFiddle : http://jsfiddle.net/zAeA2/

Зразок HTML / CSS :

<td>
    <!--Relative-positioned container-->
    <div class="container">
        <!--Visible-->
        <div class="content"><!--Content here--></div>
        <!--Hidden spacer-->
        <div class="spacer"><!--Content here--></div>
        <!--Keeps the container from collapsing without
            having to specify a height-->
        <span>&nbsp;</span>
     </div>
</td>

.container {
    position: relative;
}
.content {
    position: absolute;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.spacer {
    height: 0;
    overflow: hidden;
}

Я зіткнувся з тим же викликом кілька днів тому. Здається, Луцифер Сем знайшов найкраще рішення.

Але я помітив, що ви повинні дублювати вміст у розпірнім елементі. Думав, що це не так вже й погано, але я також хотів би застосувати titleспливаюче вікно для відрізаного тексту. А це означає, що довгий текст з’явиться в моєму коді втретє.

Тут я пропоную отримати доступ до titleатрибуту з :afterпсевдоелемента для створення розпірки та підтримання чистоти HTML.

Працює на IE8 +, FF, Chrome, Safari, Opera

<table border="1">
  <tr>
    <td class="ellipsis_cell">
      <div title="This cells has more content">
        <span>This cells has more content</span>
      </div>
    </td>
    <td class="nowrap">Less content here</td>
  </tr>
</table>

.ellipsis_cell > div {
    position: relative;
    overflow: hidden;
    height: 1em;
}

/* visible content */
.ellipsis_cell > div > span {
    display: block;
    position: absolute; 
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1em;
}

/* spacer content */
.ellipsis_cell > div:after {
    content: attr(title);
    overflow: hidden;
    height: 0;
    display: block;
}

http://jsfiddle.net/feesler/HQU5J/

Якщо Javascript прийнятний, я склав швидку процедуру, яку ви можете використовувати як вихідну точку. Він динамічно намагається адаптувати ширину комірок, використовуючи внутрішню ширину прольоту, в реакцію на події зміни розміру вікна.

В даний час передбачається, що кожна комірка зазвичай отримує 50% від ширини рядка, і вона зруйнує праву комірку, щоб утримати ліву комірку на максимальній ширині, щоб уникнути переповнення. Ви можете реалізувати набагато складнішу логіку балансування ширини, залежно від випадків використання. Сподіваюсь, це допомагає:

Розмітка для рядка, який я використовував для тестування:

<tr class="row">
    <td style="overflow: hidden; text-overflow: ellipsis">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    </td>
    <td style="overflow: hidden; text-overflow: ellipsis">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    </td>
</tr>

JQuery, який підключає подію зміни розміру:

$(window).resize(function() {
    $('.row').each(function() {
        var row_width = $(this).width();
        var cols = $(this).find('td');
        var left = cols[0];
        var lcell_width = $(left).width();
        var lspan_width = $(left).find('span').width();
        var right = cols[1];
        var rcell_width = $(right).width();
        var rspan_width = $(right).find('span').width();

        if (lcell_width < lspan_width) {
            $(left).width(row_width - rcell_width);
        } else if (rcell_width > rspan_width) {
            $(left).width(row_width / 2);
        }
    });
});

Є набагато простіше і елегантніше рішення.

У комірці таблиці, до якої потрібно застосувати усікання, просто включіть div-контейнер із компонуванням таблиці css: fix. Цей контейнер займає повну ширину комірки батьківської таблиці, тому він навіть діє чуйно.

Обов’язково застосуйте усічення до елементів таблиці.

Працює від IE8 +

<table>
  <tr>
    <td>
     <div class="truncate">
       <h1 class="truncated">I'm getting truncated because I'm way too long to fit</h1>
     </div>
    </td>
    <td class="some-width">
       I'm just text
    </td>
  </tr>
</table>

та css:

    .truncate {
      display: table;
      table-layout: fixed;
      width: 100%;
    }

    h1.truncated {
      overflow-x: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

ось робочий Fiddle https://jsfiddle.net/d0xhz8tb/

Проблема полягає у «макеті таблиці: фіксований», який створює стовпчики рівномірно розташованої фіксованої ширини. Але вимкнення цього властивості css призведе до вбивства переповнення тексту, оскільки таблиця стане максимально великою (і чим не зазначається переповнення).

Вибачте, але в цьому випадку Фред не може мати свій торт і їсти його .. якщо тільки орендодавець не дасть Celldito менше місця для роботи, в першу чергу, Фред не може використовувати його ..

Ви можете спробувати «зважити» певні стовпці, наприклад:

<table border="1" style="width: 100%;">
    <colgroup>
        <col width="80%" />
        <col width="20%" />
    </colgroup>
    <tr>
        <td>This cell has more content.</td>
        <td>Less content here.</td>
    </tr>
</table>

Ви також можете спробувати ще кілька цікавих налаштувань, як-от використання стовпців із шириною 0% та використання комбінації властивості white-spaceCSS.

<table border="1" style="width: 100%;">
    <colgroup>
        <col width="100%" />
        <col width="0%" />
    </colgroup>
    <tr>
        <td>This cell has more content.</td>
        <td style="white-space: nowrap;">Less content here.</td>
    </tr>
</table>

Ви отримуєте ідею.

Так, я б сказав, що у тридцяти пісень це є, немає способу це зробити, якщо ви не використовуєте метод js. Ви говорите про складний набір умов надання, який вам доведеться визначити. наприклад, що станеться, коли обидві клітини стають занадто великими для своїх квартир, вам доведеться вирішити, хто має пріоритет, або просто просто надати їм відсоток площі, і якщо вони будуть переповнені, вони обидва займуть цю площу, і лише якщо у них буде пробіл ви розтягуєте ноги в іншій комірці, в будь-якому випадку немає можливості зробити це з css. Хоча є деякі досить прикольні речі, які люди роблять із css, про які я не думав. Я дуже сумніваюся, що ти можеш це зробити.

Як і samplebias відповідь, якщо Javascript - прийнятна відповідь, я створив плагін jQuery спеціально для цієї мети: https://github.com/marcogrcr/jquery-tableoverflow

Щоб використовувати плагін, просто введіть

$('selector').tableoverflow();

Повний приклад: http://jsfiddle.net/Cw7TD/3/embedded/result/

Зміни:

• Виправити jsfiddle для сумісності IE.
• Виправте jsfiddle для кращої сумісності браузера (Chrome, Firefox, IE8 +).

Скористайтеся деяким хакером css, мабуть, display: table-column;може допомогти:

<div class="myTable">
    <div class="flexibleCell">A very long piece of content in first cell, long enough that it would normally wrap into multiple lines.</div>
    <div class="staticCell">Less content</div>
</div>

.myTable {
    display: table;
    width: 100%;
}

.myTable:before {
    display: table-column;
    width: 100%;
    content: '';
}

.flexibleCell {
    display: table-cell;
    max-width:1px;
    white-space: nowrap;
    text-overflow:ellipsis;
    overflow: hidden;
}

.staticCell {
    white-space: nowrap;
}

JSFiddle: http://jsfiddle.net/blai/7u59asyp/

Просто додайте до своїх правил такі правила td:

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
// These ones do the trick
width: 100%;
max-width: 0;

Приклад:

table {
  width: 100%
}

td {
  white-space: nowrap;
}

.td-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  max-width: 0;
}

<table border="1">
  <tr>
    <td>content</td>
    <td class="td-truncate">long contenttttttt ttttttttt ttttttttttttttttttttttt tttttttttttttttttttttt ttt tttt ttttt ttttttt tttttttttttt ttttttttttttttttttttttttt</td>
    <td>other content</td>
  </tr>
</table>

PS: Якщо ви хочете встановити власну ширину для іншого tdвластивості використання min-width.

Це питання спливає в Google, тому в моєму випадку я використовував фрагмент css з https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/ але застосувавши його до td, НЕ дав бажаний результат.

Мені довелося додати тег div навколо тексту в td, і еліпсис нарешті спрацював.

Скорочений HTML-код;

<table style="width:100%">
 <tr>
    <td><div class='truncate'>Some Long Text Here</div></td>
 </tr>
</table>

Скорочений CSS;

.truncate { width: 300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

Перевірте, чи "норап" вирішує проблему в такій мірі. Примітка: nowrap не підтримується в HTML5

<table border="1" style="width: 100%; white-space: nowrap; table-layout: fixed;">
<tr>
    <td style="overflow: hidden; text-overflow: ellipsis;" nowrap >This cells has more content  </td>
    <td style="overflow: hidden; text-overflow: ellipsis;" nowrap >Less content here has more content</td>
</tr>

ви можете встановити ширину правої комірки на мінімальну необхідну ширину, а потім застосувати переповнений + переповнення тексту до внутрішньої частини лівої комірки, але Firefox тут баггі ...

хоча, здається, флешбокс може допомогти

Я нещодавно працюю над цим. Перевірте цей тест jsFiddle , спробуйте самостійно змінити ширину базової таблиці, щоб перевірити поведінку).

Рішення полягає в тому, щоб вбудувати таблицю в іншу:

<table style="width: 200px;border:0;border-collapse:collapse">
    <tbody>
        <tr>
            <td style="width: 100%;">
                <table style="width: 100%;border:0;border-collapse:collapse">
                    <tbody>
                        <tr>
                            <td>
                                <div style="position: relative;overflow:hidden">
                                    <p>&nbsp;</p>
                                    <p style="overflow:hidden;text-overflow: ellipsis;position: absolute; top: 0pt; left: 0pt;width:100%">This cells has more content</p>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td style="white-space:nowrap">Less content here</td>
        </tr>
    </tbody>
</table>

Чи задоволений зараз Фред розширенням Celldito?

Не знаю, чи це комусь допоможе, але я вирішив подібну проблему, вказавши конкретні розміри ширини у відсотках для кожного стовпця. Очевидно, це було б найкраще, якщо кожен стовпець має вміст із шириною, яка не дуже варіюється.

У мене був той самий випуск, але мені потрібно було відображати кілька рядків (де text-overflow: ellipsis;не вдається). Я вирішую це за допомогою textareaвнутрішнього а, TDа потім стилю його поводитись як клітинка таблиці.

    textarea {
        margin: 0;
        padding: 0;
        width: 100%;
        border: none;
        resize: none;

        /* Remove blinking cursor (text caret) */
        color: transparent;
        display: inline-block;
        text-shadow: 0 0 0 black; /* text color is set to transparent so use text shadow to draw the text */
        &:focus {
            outline: none;
        }
    }

З огляду на те, що "таблиця-макет: виправлена" є найважливішою вимогою компонування, що це створює рівномірно розташовані нерегульовані стовпці, але що вам потрібно зробити комірки різної процентної ширини, можливо, встановіть "colspan" ваших комірок на множину?

Наприклад, використовуючи загальну ширину 100 для легких підрахунків відсотків і кажучи, що вам потрібна одна клітинка 80%, а інша 20%, врахуйте:

<TABLE width=100% style="table-layout:fixed;white-space:nowrap;overflow:hidden;">
     <tr>
          <td colspan=100>
               text across entire width of table
          </td>
     <tr>
          <td colspan=80>
               text in lefthand bigger cell
          </td>
          <td colspan=20>
               text in righthand smaller cell
          </td>
</TABLE>

Звичайно, для стовпців 80% і 20% ви можете просто встановити 100% ширину кольшану на 5, 80% на 4 та 20% на 1.