Использование `text-overflow: ellipsis` в адаптивной таблице с динамической шириной?
У меня очень простой HTML <table>, в котором содержимое некоторых ячеек очень длинное.
По умолчанию длинный текст переносится на несколько строк, но я хочу использовать text-overflow: ellipsis, чтобы обрезать текст в той точке, где он переносится, сохраняя его в одной строке. Проблема в том, что когда я использую text-wrap: nowrap, текст помещается в одну огромную строку, а таблица вынуждена переполнять контейнер и выглядит ужасно. И очевидно, что эллипс не работает.
Таблица адаптивна, поэтому я не могу присвоить ей или ее ячейкам фиксированную ширину.
Вот jsfiddle, демонстрирующий проблему: https://jsfiddle.net/4m8ofqwu/4/
Это таблица без text-wrap: nowrap:
Это то, чего я хочу достичь (многоточие в том месте, где обычно переносится текст):
Вот что происходит на самом деле:
section {
background: green;
padding: 50px;
}
table {
background: white;
width: 100%;
border-collapse: collapse;
}
.truncateme {
/*
Remove the "nowrap" line to see the text wrap and the
table return to normal width with no overflow.
This is the width I want to achieve, but instead of the
text wrapping on to multiple lines, I want it to break
with an ellipsis "..." at that width.
*/
text-wrap: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}<section>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
<th>Column 8</th>
<th>Column 9</th>
<th>Column 10</th>
</tr>
<tr>
<td>Apple</td>
<td>Orange</td>
<td>Banana</td>
<td>Strawberry</td>
<td>Grapes</td>
<td><div class = "truncateme">This is a super long cell which I would like to truncate with an ellipsis instead of letting the text wrap. This is a super long cell which I would like to truncate with an ellipsis instead of letting the text wrap. This is a super long cell which I would like to truncate with an ellipsis instead of letting the text wrap. This is a super long cell which I would like to truncate with an ellipsis instead of letting the text wrap.</div></td>
<td>Watermelon</td>
<td>Peach</td>
<td>Mango</td>
<td>Kiwi</td>
</tr>
<tr>
<td>Carrot</td>
<td>Broccoli</td>
<td>Tomato</td>
<td>Cucumber</td>
<td>Spinach</td>
<td>Potato</td>
<td>Eggplant</td>
<td>Cabbage</td>
<td>Cauliflower</td>
<td>Pepper</td>
</tr>
<tr>
<td>Pear</td>
<td>Cherry</td>
<td>Blueberry</td>
<td>Blackberry</td>
<td>Raspberry</td>
<td>Melon</td>
<td>Lemon</td>
<td>Lime</td>
<td>Coconut</td>
<td>Papaya</td>
</tr>
<tr>
<td>Lettuce</td>
<td>Onion</td>
<td>Garlic</td>
<td>Ginger</td>
<td>Zucchini</td>
<td>Kale</td>
<td>Radish</td>
<td>Beetroot</td>
<td>Brussels Sprouts</td>
<td>Asparagus</td>
</tr>
<tr>
<td>Apricot</td>
<td>Plum</td>
<td>Nectarine</td>
<td>Pomegranate</td>
<td>Fig</td>
<td>Avocado</td>
<td>Guava</td>
<td>Passion Fruit</td>
<td>Starfruit</td>
<td>Lychee</td>
</tr>
</table>
</section>Отвечает ли это на ваш вопрос? Как сделать так, чтобы текст не занимал больше 1 строки?
Могут ли другие столбцы иметь фиксированную ширину или они тоже должны быть динамическими? Потому что, если они не должны быть динамичными, поможет простая линия table-layout: fixed к «таблице» и фиксированная ширина всех остальных столбцов, вот так
Можете ли вы найти желаемую ширину и просто добавить ее как максимальную ширину? Я думаю, вам нужна принудительная ширина.
Ответы 2
Вам необходимо извлечь содержимое ячейки из потока, чтобы оно не повлияло на макет таблицы. Один из способов сделать это — использовать абсолютное позиционирование.
Затем, чтобы сделать шестой столбец как можно более широким, оформите его с помощью width: 100%. Однако это заставляет другие столбцы быть как можно более узкими, поэтому такие значения, как «Брюссельская капуста», переносятся на две строки. Избегайте этого, стилизуя каждую ячейку с помощью white-space: nowrap.
section {
background: green;
padding: 50px;
}
table {
background: white;
width: 100%;
border-collapse: collapse;
}
th, td {
white-space: nowrap;
padding: 2px;
}
.truncateme {
position: relative;
width: 100%;
}
.truncateme>div {
position: absolute;
border: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
padding: 2px;
white-space: nowrap;
text-overflow: ellipsis;
background: white;
}<section>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
<th>Column 8</th>
<th>Column 9</th>
<th>Column 10</th>
</tr>
<tr>
<td>Apple</td>
<td>Orange</td>
<td>Banana</td>
<td>Strawberry</td>
<td>Grapes</td>
<td class = "truncateme"><div>This is a super long cell which I would like to truncate with an ellipsis instead of letting the text wrap. This is a super long cell which I would like to truncate with an ellipsis instead of letting the text wrap. This is a super long cell which I would like to truncate with an ellipsis instead of letting the text wrap. This is a super long cell which I would like to truncate with an ellipsis instead of letting the text wrap.</div></td>
<td>Watermelon</td>
<td>Peach</td>
<td>Mango</td>
<td>Kiwi</td>
</tr>
<tr>
<td>Carrot</td>
<td>Broccoli</td>
<td>Tomato</td>
<td>Cucumber</td>
<td>Spinach</td>
<td>Potato</td>
<td>Eggplant</td>
<td>Cabbage</td>
<td>Cauliflower</td>
<td>Pepper</td>
</tr>
<tr>
<td>Pear</td>
<td>Cherry</td>
<td>Blueberry</td>
<td>Blackberry</td>
<td>Raspberry</td>
<td>Melon</td>
<td>Lemon</td>
<td>Lime</td>
<td>Coconut</td>
<td>Papaya</td>
</tr>
<tr>
<td>Lettuce</td>
<td>Onion</td>
<td>Garlic</td>
<td>Ginger</td>
<td>Zucchini</td>
<td>Kale</td>
<td>Radish</td>
<td>Beetroot</td>
<td>Brussels Sprouts</td>
<td>Asparagus</td>
</tr>
<tr>
<td>Apricot</td>
<td>Plum</td>
<td>Nectarine</td>
<td>Pomegranate</td>
<td>Fig</td>
<td>Avocado</td>
<td>Guava</td>
<td>Passion Fruit</td>
<td>Starfruit</td>
<td>Lychee</td>
</tr>
</table>
</section>Спасибо, это здорово. Единственная проблема заключается в том, что ячейка становится максимально широкой, поэтому, если текст длинной ячейки не очень длинный, после него будет много видимых пробелов, которые в противном случае могли бы служить полезным пространством для других ячеек таблицы. расшириться в. Есть ли способ сделать максимальную ширину ячейки равной длине ее текста?
Не в этом решении, потому что, используя абсолютное позиционирование, я отделил содержимое ячеек от таблицы, чтобы они больше не влияли друг на друга.
Спасибо. Существуют ли какие-либо другие решения на чистом CSS, которые могут работать, или мне придется использовать JavaScript, чтобы установить максимальную ширину на основе самой длинной строки в столбце?
Может быть, а может и нет. Пробовали ли вы ответить на этот вопрос? Использование CSS Grid вместо таблицы может дать вам больше контроля. Или вы можете просто немного смягчить свои требования?
Я попробовал то, что указано в этом вопросе; Я думаю, мне придется принять не совсем идеальное решение и/или использовать немного JS. CSS-сетка была бы хороша, но я активно использую DataTables.net для фильтрации таблиц и т. д., поэтому мне не хватает настоящей <table> разметки. Спасибо за вашу помощь.
Обновлено: вам нужно указать ширину контейнера текста, чтобы многоточие работало. Но вы упомянули, что это адаптивная таблица и не хотите менять ширину ячеек. Но вы можете установить максимальную ширину ячеек по умолчанию, чтобы она не занимала такую длину и чтобы многоточие работало.
Добавьте td к max-width: 300px; (вы можете изменить его в зависимости от ваших потребностей):
td {
max-width: 300px;
}
Вот рабочий код:
section {
background: green;
padding: 50px;
}
table {
background: white;
width: 100%;
border-collapse: collapse;
}
.truncateme {
/*
Remove the "nowrap" line to see the text wrap and the
table return to normal width with no overflow.
This is the width I want to achieve, but instead of the
text wrapping on to multiple lines, I want it to break
with an ellipsis "..." at that width.
*/
text-wrap: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
td {
max-width: 300px;
}<section>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
<th>Column 8</th>
<th>Column 9</th>
<th>Column 10</th>
</tr>
<tr>
<td>Apple</td>
<td>Orange</td>
<td>Banana</td>
<td>Strawberry</td>
<td>Grapes</td>
<td><div class = "truncateme">This is a super long cell which I would like to truncate with an ellipsis instead of letting the text wrap. This is a super long cell which I would like to truncate with an ellipsis instead of letting the text wrap. This is a super long cell which I would like to truncate with an ellipsis instead of letting the text wrap. This is a super long cell which I would like to truncate with an ellipsis instead of letting the text wrap.</div></td>
<td>Watermelon</td>
<td>Peach</td>
<td>Mango</td>
<td>Kiwi</td>
</tr>
<tr>
<td>Carrot</td>
<td>Broccoli</td>
<td>Tomato</td>
<td>Cucumber</td>
<td>Spinach</td>
<td>Potato</td>
<td>Eggplant</td>
<td>Cabbage</td>
<td>Cauliflower</td>
<td>Pepper</td>
</tr>
<tr>
<td>Pear</td>
<td>Cherry</td>
<td>Blueberry</td>
<td>Blackberry</td>
<td>Raspberry</td>
<td>Melon</td>
<td>Lemon</td>
<td>Lime</td>
<td>Coconut</td>
<td>Papaya</td>
</tr>
<tr>
<td>Lettuce</td>
<td>Onion</td>
<td>Garlic</td>
<td>Ginger</td>
<td>Zucchini</td>
<td>Kale</td>
<td>Radish</td>
<td>Beetroot</td>
<td>Brussels Sprouts</td>
<td>Asparagus</td>
</tr>
<tr>
<td>Apricot</td>
<td>Plum</td>
<td>Nectarine</td>
<td>Pomegranate</td>
<td>Fig</td>
<td>Avocado</td>
<td>Guava</td>
<td>Passion Fruit</td>
<td>Starfruit</td>
<td>Lychee</td>
</tr>
</table>
</section>ОП конкретно сказал, что они хотят избежать присвоения ячейке фиксированной ширины, поскольку это адаптивная таблица.
@user7290573 user7290573 спасибо, что указали на это. Я отредактировал ответ. Мы можем использовать tdmax-width, чтобы, если ширина ячейки превысила ее, она была преобразована в многоточие. Ширина ячеек останется адаптивной.
Попробуйте
white-space: nowrapвместоtext-wrap. Последнее, как правило, больше связано с тем, как вы переносите строки, тогда как первое определяет поведение пробелов (включая их способность переносить строки).