У меня есть ячейка таблицы, которой я всегда хотел бы быть определенной ширины. Тем не менее, он не работает с большими строками текста без пробелов. Вот контрольный пример:
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>Как получить текст, который будет обрезан по краю поля, а не расширяться?
Ответы:
Здесь та же проблема .
Нужно установить table-layout:fixed и подходящую ширину на элементе таблицы, а также overflow:hiddenи white-space: nowrapна ячейках таблицы.
Ширина таблицы должна быть такой же (или меньшей), чем ячейки фиксированной ширины.
С одним столбцом фиксированной ширины:
С несколькими столбцами фиксированной ширины:
Ширина таблицы должна быть установлена , но любая дополнительная ширина просто берется жидкостной ячейкой (ями).
С несколькими столбцами, фиксированной шириной и шириной жидкости:
Это просто так, как ТД. Я полагаю, что это может быть связано с тем, что свойство «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, но это должно быть началом.
Примените 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, связанный с шириной ячейки, играет лучше, когда таблица заранее знает ширину столбцов.
Ну, вот решение для вас, но я не очень понимаю, почему оно работает:
<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>А именно, оборачивая содержимое ячейки в div.
overflow:hiddenего можно удалить td, а ширину divможно установить на 100%, чтобы она работала с любой tdшириной (включая авторазмеры!)
Лучшее решение - поместить 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>Вы должны будете установить атрибуты стиля таблицы: widthи table-layout: fixed;позволить 'overflow: hidden;' Атрибут работает правильно.
По моему мнению, это работает лучше, чем использование div с widthатрибутом style, особенно при использовании его для вычислений динамического изменения размера, таблица будет иметь более простой DOM, который облегчает манипулирование, поскольку не требуется коррекция для padding и margin
Кроме того, вам не нужно устанавливать ширину для всех ячеек, а только для ячеек в первом ряду.
Как это:
<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>У меня только что была похожая проблема, и мне пришлось сначала использовать ее <div>изнутри <td>(решение Джона Макинтайра мне не помогло по разным причинам).
Обратите внимание, что <td><div>...</div></td>это недопустимое размещение для div, поэтому вместо этого я использую <span>с display:block;set. Теперь он хорошо работает и работает.
чтобы сделать более простым, я предлагаю поместить текстовую область в тд, который автоматически управляет переполнением
<td><textarea autofocus>$post_title</textarea></td>
нужно улучшать
<style>
.col {display:table-cell;max-width:50px;width:50px;overflow:hidden;white-space: nowrap;}
</style>
<table>
<tr>
<td class="col">123456789123456789</td>
</tr>
</table>отображает 123456
vertical-align:middleи даже добавление его в DIV не решает проблему.