Почему переполнение: скрытый не работает в <td>? - PullRequest
Новая
       31

Почему переполнение: скрытый не работает в <td>?

138 голосов
/ 04 февраля 2009

У меня есть ячейка таблицы, которой я бы всегда хотел быть определенной ширины. Тем не менее, он не работает с большими строками текста без пробелов. Вот тестовый пример: 

td {
  border: solid green 1px;
  width: 200px;
  overflow: hidden;
}
<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

Как сделать так, чтобы текст обрезался по краю поля, а не раскрылся в окне?

Ответы [ 10 ]

192 голосов
/ 04 февраля 2009

Вот такая же проблема .

Вам необходимо установить table-layout:fixed и подходящую ширину для элемента таблицы, а также overflow:hidden и white-space: nowrap для ячеек таблицы.

Примеры

Фиксированная ширина столбцов

Ширина таблицы должна быть такой же (или меньшей), чем ячейка (и) фиксированной ширины.

С одним столбцом фиксированной ширины: 

* {
  box-sizing: border-box;
}
table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  max-width: 100px;
}
td {
  background: #F00;
  padding: 20px;
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
  border: solid 1px #000;
}
<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

С несколькими столбцами фиксированной ширины: 

* {
  box-sizing: border-box;
}
table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  max-width: 200px;
}
td {
  background: #F00;
  padding: 20px;
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
  border: solid 1px #000;
}
<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

Колонки фиксированной и ширины жидкости

Ширина таблицы должна быть установлена ​​, но любая дополнительная ширина просто берется жидкостной ячейкой (ями).

С несколькими столбцами, фиксированная ширина и ширина жидкости: 

* {
  box-sizing: border-box;
}
table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}
td {
  background: #F00;
  padding: 20px;
  border: solid 1px #000;
}
tr td:first-child {
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
}
<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>
18 голосов
/ 04 февраля 2009

Таковы ТД. Я полагаю, что это может быть связано с тем, что свойство 'TD' элемента TD по умолчанию установлено на 'table-cell', а не 'block'.

В вашем случае альтернатива может заключаться в том, чтобы обернуть содержимое TD в DIV и применить ширину и переполнение к DIV. 

<td style="border: solid green 1px; width:200px;">
    <div style="width:200px; overflow:hidden;">
        This_is_a_terrible_example_of_thinking_outside_the_box.
    </div>
</td>

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

9 голосов
/ 05 февраля 2015

Применить CSS table-layout:fixed; (а иногда и width:<any px or %>) к TABLE и стиль white-space: nowrap; overflow: hidden; на TD. Затем установите ширину CSS для правильных элементов ячейки или столбца.

Важно отметить, что ширина столбцов таблицы с фиксированной разметкой определяется шириной ячейки в первой строке таблицы. Если в первом ряду имеются элементы TH, а ширина применяется к TD (а не TH), то ширина применяется только к содержимому TD (пробел и переполнение могут игнорироваться); столбцы таблицы будут распределяться равномерно независимо от заданной ширины TD (поскольку ширины не указаны [в TH в первой строке]), и столбцы будут иметь [рассчитанную] равную ширину; таблица не будет пересчитывать ширину столбца на основе ширины TD в последующих строках. Установите ширину первых элементов ячейки, с которыми столкнется таблица.

В качестве альтернативы и самый безопасный способ установить ширину столбцов - использовать теги <COLGROUP> и <COL> в таблице с шириной CSS, установленной для каждой фиксированной ширины COL. CSS, связанный с шириной ячейки, играет лучше, когда таблица заранее знает ширину столбцов.

6 голосов
/ 04 февраля 2009

Я не знаком с конкретной проблемой, но вы можете вставить div и т. Д. В тд и установить для него переполнение.

5 голосов
/ 04 февраля 2009

Ну, вот вам решение, но я не очень понимаю, почему оно работает: 

<html><body>
  <div style="width: 200px; border: 1px solid red;">Test</div>
  <div style="width: 200px; border: 1px solid blue; overflow: hidden; height: 1.5em;">My hovercraft is full of eels.  These pretzels are making me thirsty.</div>
  <div style="width: 200px; border: 1px solid yellow; overflow: hidden; height: 1.5em;">
  This_is_a_terrible_example_of_thinking_outside_the_box.
  </div>
  <table style="border: 2px solid black; border-collapse: collapse; width: 200px;"><tr>
   <td style="width:200px; border: 1px solid green; overflow: hidden; height: 1.5em;"><div style="width: 200px; border: 1px solid yellow; overflow: hidden;">
    This_is_a_terrible_example_of_thinking_outside_the_box.
   </div></td>
  </tr></table>
</body></html>

А именно, оборачивая содержимое ячейки в деление.

3 голосов
/ 09 мая 2014

Лучшее решение - поместить div в ячейку таблицы с нулевой шириной. Ячейки таблицы Tbody будут наследовать свою ширину от ширины, определенной thead. Позиция: относительная и отрицательная маржа должны помочь!

Вот скриншот: https://flic.kr/p/nvRs4j

<body>
<!-- SOME CSS -->
<style>
    .cropped-table-cells,
    .cropped-table-cells tr td { 
        margin:0px;
        padding:0px;
        border-collapse:collapse;
    }
    .cropped-table-cells tr td {
        border:1px solid lightgray;
        padding:3px 5px 3px 5px;
    }
    .no-overflow {
        display:inline-block;
        white-space:nowrap;
        position:relative; /* must be relative */
        width:100%; /* fit to table cell width */
        margin-right:-1000px; /* technically this is a less than zero width object */
        overflow:hidden;
    }
</style>

<!-- CROPPED TABLE BODIES -->
<table class="cropped-table-cells">
    <thead>
        <tr>
            <td style="width:100px;" width="100"><span>ORDER<span></td>
            <td style="width:100px;" width="100"><span>NAME<span></td>
            <td style="width:200px;" width="200"><span>EMAIL</span></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><span class="no-overflow">123</span></td>
            <td><span class="no-overflow">Lorem ipsum dolor sit amet, consectetur adipisicing elit</span></td>
            <td><span class="no-overflow">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></td>
    </tbody>
</table>
</body>
3 голосов
/ 30 апреля 2010

Вам нужно установить атрибуты стиля таблицы: width и table-layout: fixed;, чтобы позволить 'overflow: hidden;' Атрибут работает правильно.

Imo, это работает лучше, чем использование div с атрибутом стиля width, особенно при использовании его для вычислений динамического изменения размера, таблица будет иметь более простую модель DOM, которая упрощает манипуляции, поскольку не требуется коррекция для отступов и полей

Кроме того, вам не нужно устанавливать ширину для всех ячеек, а только для ячеек в первом ряду.

Как это: 

<table style="width:0px;table-layout:fixed">
<tr>
    <td style="width:60px;">
        Id
    </td>
    <td style="width:100px;">
        Name
    </td>
    <td style="width:160px;overflow:hidden">
        VeryLongTextWhichShouldBeKindOfTruncated
    </td>
</tr>
<tr>
    <td style="">
        Id
    </td>
    <td style="">
        Name
    </td>
    <td style="overflow:hidden">
        VeryLongTextWhichShouldBeKindOfTruncated
    </td>
</tr>
</table>
2 голосов
/ 23 января 2012

У меня только что была похожая проблема, и мне сначала пришлось использовать <div> внутри <td> (решение Джона Макинтайра у меня не работало по разным причинам).

Примечание , хотя <td><div>...</div></td> не является допустимым размещением для div, поэтому вместо этого я использую <span> с набором display:block;. Теперь он хорошо работает и работает.

0 голосов
/ 13 сентября 2018 
<style>
    .col {display:table-cell;max-width:50px;width:50px;overflow:hidden;}
</style>
<table>
    <tr>
        <td class="col">123456789123456789</td>
    </tr>
</table>

отображает 123456

0 голосов
/ 05 июля 2016

сделать проще я предлагаю поместить текстовую область в тд который автоматически управляет переполнением

<td><textarea autofocus>$post_title</textarea></td>

нужно улучшить

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...