HTML TD переносит текст

Question

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

Answer 1

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

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

table{
    table-layout: fixed;
}

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

td{
    word-wrap:break-word
}

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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>

Answer 6

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

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

td {
  word-wrap: break-word;
}

Answer 7

.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

Answer 8

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

white-space: pre;

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

white-space: pre-wrap;

Answer 9

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

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

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

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

Answer 10

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

т.е.

td {
  width: 1px;
}

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

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

Answer 11

Решение для меня - добавить следующее в такой столбец, где требуется перенос текста: white-space:normal

Такое же поведение в Chrome и Firefox.

Примечание: у меня была эта проблема с Q-таблицей Vue / Quasar. Я ограничил максимальную ширину столбца с помощью css / sass (не уверен, что это правильно в отношении q-таблицы Quasar).

Answer 12

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

<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 {...} ТД будет расширяться (или, возможно, сокращаться, но я сомневаюсь в этом), чтобы заполнить его подразумеваемую ширину (как мне кажется, это, кажется, table-width/number-of-cells), указанная ширина таблицы не создает такой же проблемы.

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

Answer 13

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

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

Answer 14

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

Answer 15

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