Текстовый текст HTML TD

Ответ 1

Чтобы обернуть текст TD

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

table{
    table-layout: fixed;
}

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

td{
    word-wrap:break-word
}

Ответ 2

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

Ответ 3

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

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

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

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

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

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

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

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

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

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

Ответ 4

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>

Ответ 5

.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

Ответ 6

Это работало для меня с некоторыми фреймворками css (material design lite [MDL]).

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

td {
  word-wrap: break-word;
}

Ответ 7

Фактически обтекание текста происходит автоматически в таблицах. Ошибочные люди совершают во время тестирования гипотетически предполагают длинную строку типа "gggggggggggggggggggggggggggggggggggg" и жалуются, что она не завершается. Практически нет слова на английском языке, которое так долго и даже если есть, есть небольшая вероятность, что он будет использоваться в этом <td>.

Попробуйте тестирование с предложениями типа "Контратация суеверна в предопределяющих обстоятельствах".

Ответ 8

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

<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), указанный table-width, похоже, не создает такую ​​же проблему.

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

Ответ 9

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

то есть.

td {
  width: 1px;
}

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

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

Ответ 10

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

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

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

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

Ответ 11

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