Оберните текст тегом ‹td›

Перенос текста TD

Стиль стола первого набора

table{
    table-layout: fixed;
}

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

td{
    word-wrap:break-word
}

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

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

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

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

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

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

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

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

Имейте в виду, что более старые версии IE не поддерживают минимальную/максимальную ширину.

Поскольку IE изначально не поддерживает максимальную ширину, вам нужно будет добавить хак, если вы хотите заставить его это сделать. Есть несколько способов добавить хак, это только один.

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

используйте 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>

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 (облегченный дизайн материалов [MDL]).

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

td {
  word-wrap: break-word;
}

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

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

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

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

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

white-space: pre;

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

white-space: pre-wrap;

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

i.e.

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

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

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

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

На самом деле перенос текста в таблицах происходит автоматически. Ошибка, которую люди совершают во время тестирования, заключается в том, что они гипотетически предполагают длинную строку, например «gggggggggggggggggggggggggggggggggggggggggggggggg», и жалуются, что она не переносится. В английском языке практически нет такого длинного слова, и даже если оно есть, есть небольшой шанс, что оно будет использоваться в этом <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>