Сделать перенос текста в HTML-таблицу

Question

У меня есть таблица, которая заполняется данными из базы данных.Базовая раскладка таблицы такова:

<table class="cssTable">
  <tr>
    <td class="cssRowCell1">1.</td>
    <td class="cssRowCell2">Data here</td>
  </tr>
</table>

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

Я попытался сделать следующее, но ничего из этого не сработало:

1 Добавил следующее в CSS:

.cssRowCell2
{
    min-width: 880px;
    word-wrap: break-word;
    overflow: hidden;
}

2 Попытался добавить явную таблицуширина:

<td class="cssRowCell1" width="2%">1.</td>
<td class="cssRowCell2" width="98%">Data here</td>

Есть идеи, как сделать так, чтобы это выглядело хорошо?

Answer 1

Что ж, для этого есть хорошая библиотека: она называется Hyphenator . ) И я бы посоветовал проверить это обсуждение , так как оно довольно хорошо прокомментировано. Кстати, довольно старый вопрос. )

Answer 2

Чтобы указать необязательную точку переноса в слове (на английском или другом языке, который допускает перенос), вставьте символ SOFT HYPHEN U + 00A0 или эквивалентную ссылку на сущность ­.

Чтобы указатьопциональная прямая точка разрыва строки в строке (например, foo / bar / zap), вставьте разметку <wbr>, которая недовольна рекомендациями W3C, но хорошо работает, особенно если приняты некоторые меры предосторожности (http://www.cs.tut.fi/~jkorpela/html/nobr.html).

В дополнение к этим надежным (хотя и неуклюжим) методам вы можете рассмотреть методы, которые работают гораздо реже (но более изящно), такие как правило CSS hyphens: auto вместе с объявлением языка.

Answer 3

Вместе с таблицей стилей ячеек таблицы "word-wrap: break-word;" , добавьте "table-layout: fixed" в таблицу стилей таблицы.Это будет работать.

Answer 4

Используйте приведенный ниже код, который может вам помочь.

<table border="1" cellspacing="0" cellpadding="0" class="cssTable" style="table-layout:fixed" width="100%">
  <tr>
    <td width="8%" class="cssRowCell1">1.</td>
    <td width="92%" class="cssRowCell2">Data here   
    </td>
  </tr>
</table>

Я только что добавил style="table-layout:fixed" в табличный тег и установил ширину 100%, от вас полностью зависит, какую ширину вы хотите установить для столбцов.

Примечание: Css такое же, как вы упомянули.

Answer 5

Вы пробовали играть с white-space?