CSS: Усекать ячейки таблицы, но приспосабливать как можно больше

Ответ 1

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

Ответ 2

Я считаю, что у меня есть решение, отличное от 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;
}

Ответ 3

Я столкнулся с такой же проблемой несколько дней назад. Кажется, Lucifer Sam нашел лучшее решение.

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

Ответ 4

Если 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);
        }
    });
});

Ответ 5

Там намного проще и элегантнее.

В ячейке таблицы, которую вы хотите применить усечение, просто добавьте контейнер div с css table-layout: fixed. Этот контейнер принимает всю ширину ячейки родительской таблицы, поэтому он даже реагирует.

Обязательно применяйте усечение к элементам в таблице.

Работает с 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;
    }

здесь работает скрипка https://jsfiddle.net/d0xhz8tb/

Ответ 6

Проблема заключается в "table-layout: fixed", который создает столбцы с равномерным интервалом фиксированной ширины. Но отключение этого css-свойства убьет переполнение текста, потому что таблица станет как можно больше (и, тем не менее, произойдет переполнение).

Извините, но в этом случае Фред не может получить свой торт и съесть его, если хозяин не даст Celldito меньше места для работы, в первую очередь, Фред не может использовать его.

Ответ 7

Вы можете попробовать "весить" определенные столбцы, например:

<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% -width и использовать некоторую комбинацию свойства white-space CSS.

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

Вы получаете идею.

Ответ 8

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

Ответ 9

Как и ответ samplebias, снова, если Javascript является приемлемым ответом, я специально создал для этого плагин jQuery: https://github.com/marcogrcr/jquery-tableoverflow

Чтобы использовать плагин, просто введите

$('selector').tableoverflow();

Полный пример: http://jsfiddle.net/Cw7TD/3/embedded/result/

редактирует:

• Исправьте jsfiddle для совместимости с IE.
• Исправьте jsfiddle для лучшей совместимости браузера (Chrome, Firefox, IE8 +).

Ответ 10

Используйте некоторый взлом 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/

Ответ 11

Проверьте, разрешено ли "nowrap" решить проблему. Примечание: 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>

Ответ 12

Я недавно работал над этим. Ознакомьтесь с этим jsFiddle test, попробуйте сами изменить ширину базовой таблицы, чтобы проверить поведение).

Решение состоит в том, чтобы вставить таблицу в другую:

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

Ответ 13

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

хотя, кажется, flexbox может помочь

Ответ 14

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

Ответ 15

У меня была такая же проблема, но мне нужно было отображать несколько строк (где text-overflow: ellipsis; не работает). Я решаю его с помощью textarea внутри a 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;
        }
    }

Ответ 16

Учитывая, что "table-layout: fixed" является основным требованием к макету, это создает равномерно распределенные не регулируемые столбцы, но вам нужно сделать ячейки с разной процентной шириной, возможно, установите "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% ширину ячейки colspan на 5, 80% на 4 и на 20% на 1.