Обернуть текст в тег <td>


136

Я хочу обернуть текст, который добавляется к <td>элементу. Я пытался с style="word-wrap: break-word;" width="15%". Но это не упаковка текста. Обязательно ли указывать 100% ширины? У меня есть другие элементы управления для отображения, поэтому доступна только 15% ширины.


1
Какой HTML вы используете? это <td> какой-то текст ... </ td> или ваш TD содержит <p> или <span>? Также, когда вы говорите, что это не перенос, я предполагаю, что вы видите расширение TD по ширине, когда текст длиннее «15%» ширины таблиц?
Scunliffe

Мой HTML содержит <td> динамический текст .. </ td>, и то, что вы предполагаете о расширении TD, абсолютно правильно.

Ответы:


221

Завернуть текст TD

Первый набор стиля таблицы

table{
    table-layout: fixed;
}

затем установите TD Style

td{
    word-wrap:break-word
}

5
Я полагаю, что он не принят, потому что он не работает в Chrome ... :-( Какое-нибудь решение для webkit?
MarcoS

4
Отлично сработало для меня в Chrome.
Алехандро Ридель

17
Интересно ... В Chrome мне пришлось использовать white-space: normalстиль td, чтобы заставить упаковку работать (вместо word-wrap:break-word)
Джим

3
Я могу подтвердить, что у меня был такой же опыт с ответом Джима. По какой-то причине Chrome не отвечает безwhite-space:normal;
petrosmm

1
Используйте, white-space: pre-wrapесли вам нужно сохранить пустое пространство.
eicksl

47

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


7
Я пытался это решение, но оно не работает в Chrome. У меня есть таблица, которая динамически заполняется гиперссылкой, которая в два раза больше ширины ячейки. 'table-layout: fixed' решает проблему с растяжением таблицы, но не переносит текст; вместо этого он продолжает растягиваться справа от страницы. Я что-то упускаю?
VOIDHand

30

Я полагаю, вы столкнулись с проблемой 22 таблиц. Таблицы отлично подходят для упаковки контента в табличную структуру, и они прекрасно справляются с «растяжкой» для удовлетворения потребностей контента, который они содержат.

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

Есть несколько решений.

1.) Вы можете попробовать установить максимальную ширину на TD.

<td style="max-width:150px;">

2.) Вы можете попробовать поместить свой текст в элемент обтекания (например, в span) и установить для него ограничения.

<td><span style="max-width:150px;">Hello World...</span></td>

Имейте в виду, что более старые версии IE не поддерживают min / max-width.

Так как IE изначально не поддерживает max-width, вам нужно добавить хак, если вы хотите форсировать его. Есть несколько способов добавить хак, это только один.

При загрузке страницы, только для IE6, получите визуализированную ширину таблицы (в пикселях), затем получите 15% от этой величины и примените ее в качестве ширины к первому TD в этом столбце (или TH, если у вас есть заголовки) снова в пикселях ,


У меня есть оба пути. Но не в состоянии обернуть текст. Я использую IE6.0

1
ах, IE6. Это добавляет сложности. Я пересмотрю свой ответ с помощью взлома IE6.
Scunliffe

11

table-layout:fixedразрешит проблему с расширяющейся ячейкой, но создаст новую. IE по умолчанию скрывает переполнение, но Mozilla отобразит его за пределами поля.

Другое решение было бы использовать: overflow:hidden;width:?px

<table style="table-layout:fixed; width:100px">
 <tr>
   <td style="overflow:hidden; width:50px;">fearofthedarkihaveaconstantfearofadark</td>
   <td>
     test
   </td>
 </tr>
</table>


9

Это сработало для меня с некоторыми фреймворками CSS (Lite Design Lite [MDL]).

table {
  table-layout: fixed;
  white-space: normal!important;
}

td {
  word-wrap: break-word;
}

8

использовать word-breakего можно использовать без укладки tableвtable-layout: fixed

table {
  width: 140px;
  border: 1px solid #bbb
}

.tdbreak {
  word-break: break-all
}
<p>without word-break</p>
<table>
  <tr>
    <td>LOOOOOOOOOOOOOOOOOOOOOOOOOOOOGGG</td>
  </tr>
</table>

<p>with word-break</p>
<table>
  <tr>
    <td class="tdbreak">LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOGGG</td>
  </tr>
</table>


3

Это работает очень хорошо:

<td><div style = "width:80px; word-wrap: break-word"> your text </div></td> 

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

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


1
Вы могли бы вместо этого использовать CSS, но в современном HTML, как правило, избегают встроенных стилей, особенно если вы повторяете одни и те же стили снова и снова для каждого скопированного div.
TankorSmash

3

У меня были некоторые из моих tdс:

white-space: pre;

Это решило это для меня:

white-space: pre-wrap;

2

Чтобы сделать ширину ячейки точно такой же, как самое длинное слово текста, просто установите ширину ячейки в 1px

т.е.

td {
  width: 1px;
}

Это экспериментально, и я узнал об этом во время проб и ошибок

Живая скрипка: http://jsfiddle.net/harshjv/5e2oLL8L/2/


1

Возможно, это может сработать, но это может оказаться немного неприятным в какой-то момент в будущем (если не сразу).

<style> 
tbody td span {display: inline-block;
               width: 10em; /* this is the nuisance part, as you'll have to define a particular width, and I assume -without testing- that any percent widths would be relative to the containing `<td>`, not the `<tr>` or `<table>` */
               overflow: hidden; 
               white-space: nowrap; }

</style>

...

<table>

<thead>...</thead>
<tfoot>...</tfoot>

<tbody>

<tr>

<td><span title="some text">some text</span></td> <td><span title="some more text">some more text</span></td> <td><span title="yet more text">yet more text</span></td>

</tr>

</tbody>

</table>

Основанием для этого spanявляется то, что, как отмечают другие, a <td>обычно расширяется для размещения контента, тогда как a <span>может предоставляться - и ожидается, что будет сохранять - установленную ширину; overflow: hiddenпредназначен, но не может, скрыть то , что в противном случае вызвать бы<td> к расширению.

Я бы рекомендовал использовать titleсвойство span, чтобы показать текст, который присутствует (или обрезан) в визуальной ячейке, чтобы текст оставался доступным (и если вы не хотите / не хотите, чтобы люди его видели, то зачем его иметь? во-первых, я думаю ...).

Кроме того, если вы определите ширину для td {...}td будет расширяться (или, возможно, сжиматься, но я сомневаюсь в этом), чтобы заполнить ее подразумеваемую ширину (как мне кажется, это похоже table-width/number-of-cells), указанная ширина таблицы, кажется, не создает та же проблема.

Недостатком является дополнительная разметка, используемая для презентации.


1

На самом деле перенос текста происходит автоматически в таблицах. Грубая ошибка, которую люди совершают во время тестирования, заключается в гипотетическом предположении о длинной строке, такой как «ggggggggggggggggggggggggggggggggggggggggggggggg», и о том, что она не переносится. Практически в английском языке нет такого длинного слова, и даже если оно есть, есть небольшая вероятность, что оно будет использовано в этом <td>.

Попробуйте протестировать предложения типа «Противопоставление суеверно в определенных обстоятельствах».


Это верно. Не могу понять, почему люди предлагают использовать «white-space: nowrap», поскольку это будет делать прямо противоположное тому, что хочет ОП.
mluisbrown

29
не исправляйте ни слова в английском, это так долго, но предположим, что я показываю путь к файлу, который будет непрерывным и очень длинным.
Крисп

2
Например, длинный список номеров, разделенных запятыми, к сожалению, без пробелов.
Адитья Санги

4
.. Или длинный имя_домен , который может доходить до 63 символов (расширение и WWW без НДС) http://www.abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijk.com/
Brainfeeder

Я пытаюсь решить эту проблему, когда «слово» очень длинный URL. Приведенный выше комментарий с примером «ggggggggggggggggggggggggggggggggggggggggggggggg» не учитывает длинные URL-адреса.
geekandglitter

0

Примените классы к своим TD, примените соответствующую ширину (не забудьте оставить один из них без ширины, чтобы он принимал остальную часть ширины), затем примените соответствующие стили. Скопируйте приведенный ниже код в редактор и просмотрите его в браузере, чтобы увидеть его функцию.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
td { vertical-align: top; }
.leftcolumn { background: #CCC; width: 20%; padding: 10px; }
.centercolumn { background: #999; padding: 10px; width: 15%; }
.rightcolumn { background: #666; padding: 10px; }
-->
</style>
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="leftcolumn">This is the left column. It is set to 20% width.</td>
    <td class="centercolumn">
        <p>Hi,</p>
        <p>I want to wrap a text that is added to the TD. I have tried with style="word-wrap: break-word;" width="15%". But the wrap is not happening. Is it mandatory to give 100% width ? But I have got other controls to display so only 15% width available.</p>
        <p>Need help.</p>
        <p>TIA.</p>
    </td>
    <td class="rightcolumn">This is the right column, it has no width so it assumes the remainder from the 15% and 20% assumed by the others. By default, if a width is applied and no white-space declarations are made, your text will automatically wrap.</td>
  </tr>
</table>
</body>
</html>

Я полагаю, что у OP, хотя это и не указано явно, есть проблемы с переносом непробельного динамического содержимого. В этом случае вышеуказанное решение не будет работать - jsfiddle.net/qZrFW
user66001

-1
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Poem</th>
    <th>Poem</th>
  </tr>
  <tr>
    <td nowrap>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
    <td>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
  </tr>
</table>

<p>The nowrap attribute is not supported in HTML5. Use CSS instead.</p>

</body>
</html>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.