Как заставить <td> содержимое ячейки таблицы переноситься?

146

Вот вся страница * обертываемая определяется в файле main.css

/* Wrappable cell
* Add this class to make sure the text in a cell will wrap.
* By default, data_table tds do not wrap.
*/
td.wrappable,
table.data_table td.wrappable {
    white-space: normal;
}

Вот вся страница:

<%@ include file="../../include/pre-header.html" %>
<form id="commentForm" name="commentForm" action="" method="post">



    <ctl:vertScroll height="300" headerStyleClass="data_table_scroll" bodyStyleClass="data_table_scroll" enabled="${user.scrollTables}">
        <ctl:sortableTblHdrSetup topTotal="false" href="show.whatif_edit_entry?   entryId=${entry.entryId}" />
        <table class="data_table vert_scroll_table">



            </tr>
            <tr>
                <ctl:sortableTblHdr styleClass="center" title="Comments" property="comment" type="top">Comments</ctl:sortableTblHdr>
            </tr>


            <c:forEach var="comments" items="${entry.comments}">


                <tr id="id${comments.id}">
                    <td id="comments-${comments.id}" class="wrappable" style="width:400px;">${comments.comment}</td>
                </tr>



            </c:forEach>
            <c:if test="${lock.locked || form.entryId < 0 }">
                <%-- This is the row for adding a new comment. --%>
                    <tr id="commentRow">
                        <td><input type="text" id="comment" name="comment" size="50" maxlength="250" onkeypress="javascript:return noenter();" />
                            <a href="javascript:addComment();"><img src="../images/icon_add.gif" border="0" alt="Add"/></a>
                        </td>

                    </tr>
            </c:if>

        </table>

    </ctl:vertScroll>
</form>

Это просто растягивается каждый раз, когда я отправляю.
Эта страница тоже внутри div. Нужно ли устанавливать ширину div и таблицы?

html  css  html-table 
— Док Холидей
источник
1
Где вы определяете wrappable?
— канон
2
Где .wrappableопределяется класс? Какой браузер вы используете?
— Дани
Используемый браузер особенно важен - старые версии IE не поддерживают max-width. Есть много других вещей, которые могут быть проблемой, и это невозможно сказать без дополнительной информации, но это то, что можно сломать.
— Крис Морган
Я просто пытаюсь сохранить отправленный текст, чтобы он оставался в пределах ширины, а не растягивал таблицу после того, как я ее выполнил
— Doc Holiday
Это может помочь stackoverflow.com/a/26560829/1924979
— Суровая Вахария

Ответы:

292

Используйте table-layout:fixedв таблице и word-wrap:break-wordв тд.

Смотрите этот пример:

<html>
<head>
   <style>
   table {border-collapse:collapse; table-layout:fixed; width:310px;}
   table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}
   </style>
</head>

<body>
   <table>
      <tr>
         <td>1</td>
         <td>Lorem Ipsum</td>
         <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
      </tr>
      <tr>
         <td>2</td>
         <td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>
         <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>
      </tr>
      <tr>
         <td>3</td>
         <td></td>
         <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>
      </tr>
   </table>
</body>
</html>

DEMO:

table {border-collapse:collapse; table-layout:fixed; width:310px;}
       table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}
       <table>
          <tr>
             <td>1</td>
             <td>Lorem Ipsum</td>
             <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
          </tr>
          <tr>
             <td>2</td>
             <td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>
             <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>
          </tr>
          <tr>
             <td>3</td>
             <td></td>
             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>
          </tr>
       </table>
Развернуть фрагмент

— jim31415
источник
Вы должны добавить бит border-collapse: collapse в верхнюю часть вашего ответа, чтобы люди, которые визуально сканируют ваш ответ, могли быстро получить полный ответ.
— dwoodwardgb
для немного больше модификаций table {border-collapse: collapse; макет таблицы: фиксированный; перенос по словам: разрывное слово;} таблица td {ширина: 100px; перенос слов: break-word;}
— Кулдип Кумар
44

Это работает для меня.

<style type="text/css">

 td {

    /* css-3 */
    white-space: -o-pre-wrap; 
    word-wrap: break-word;
    white-space: pre-wrap; 
    white-space: -moz-pre-wrap; 
    white-space: -pre-wrap; 

}

И атрибут таблицы:

table { 
  table-layout: fixed;
  width: 100%
}

— Лавекуш Агравал
источник
15 
td {
overflow: hidden;
max-width: 400px;
word-wrap: break-word;
}
— Jafstar
источник
6
может быть, вы можете объяснить код, чтобы он был понятен для всех
— Федерико
это показывает аккуратную таблицу, но содержание сокращено; то есть. не могу увидеть некоторые слова, если его большое содержание. overflow:hidden
— wpcoder
Жесткое кодирование максимальной ширины не очень хорошо. Он не будет масштабироваться также для больших разрешений и т. Д. Вы хотите, чтобы таблица правильно реагировала на размер.
— user959690
4

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

max-width:someValue;
word-wrap:break-word
— Фен Хань
источник
5
Обратите внимание, что это max-widthдолжно быть pxзначение, а не%
— maxedison
3

Это сработало для меня, когда мне нужно было отобразить «симпатичный» JSON в ячейке:

td { white-space:pre }

Подробнее о white-spaceнедвижимости :

  • normal : Это значение указывает агентам пользователя свернуть последовательности пробелов и разбивать строки по мере необходимости для заполнения строк.

  • pre: Это значение предотвращает свертывание пользовательских агентов последовательностями пробелов.
    Строки ломаются только у сохраненных символов новой строки.

  • nowrap: Это значение сворачивает пробел normal, но подавляет разрывы строк в тексте.

  • pre-wrap: Это значение предотвращает свертывание пользовательских агентов последовательностями пробелов.
    Строки разбиваются при сохраненных символах новой строки и по мере необходимости заполняют поля строк.

  • pre-line: Это значение указывает агентам пользователя сворачивать последовательности пробелов.
    Строки разбиваются при сохраненных символах новой строки и по мере необходимости заполняют поля строк.

(Также см. Больше в источнике .)

— ashleedawg
источник
0

Если вы хотите исправить столбец, вы должны установить ширину. Например:

<td style="width:100px;">some data</td>

— Евгений
источник
1
Я пытался это ... он почему-то продолжает расширять таблицу <td id = "comments - $ {comments.id}" class = "wrappable" style = "width: 100px"> $ {comments.comment} </ td >
— Док Холидей
0

Это еще один способ решения проблемы, если у вас длинные строки (например, имена путей к файлам), и вы хотите разбивать строки только на определенные символы (например, косые черты). Вы можете вставить символы Unicode Zero Width Space непосредственно перед (или после) косыми чертами в HTML.

— Марк Лаката
источник
0 
.wrappable { 
      overflow: hidden; 
      max-width: 400px; 
      word-wrap: break-word; 
}

Я проверил с двоичными данными, и он отлично работает здесь.

— jaip
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.