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-таблицы поддерживают стиль css "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

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

Answer 6

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

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

td {
  word-wrap: break-word;
}

Answer 7

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

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

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

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

Answer 8

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

т.е.

td {
  width: 1px;
}

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

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

Answer 9

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

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

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