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

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

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

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

table{
    table-layout: fixed;
}

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

td{
    word-wrap:break-word
}

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

Я полагаю, вы столкнулись с проблемой 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, если у вас есть заголовки) снова в пикселях ,

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>

.tbl {
    table-layout:fixed;
    border-collapse: collapse;
    background: #fff;
 }

.tbl td {
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
}

Кредиты для http://www.blakems.com/archives/000077.html

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

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

td {
  word-wrap: break-word;
}

использовать 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>

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

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

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

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

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

white-space: pre;

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

white-space: pre-wrap;

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

т.е.

td {
  width: 1px;
}

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

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

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

<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), указанная ширина таблицы, кажется, не создает та же проблема.

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

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

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

Примените классы к своим 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>

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