HTML TD переносит текст - PullRequest
Новая
       51

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

117 голосов
/ 29 июня 2009

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

Ответы [ 13 ]

201 голосов
/ 29 мая 2012

Обернуть текст TD

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

table{
    table-layout: fixed;
}

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

td{
    word-wrap:break-word
}
47 голосов
/ 30 июня 2009

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

27 голосов
/ 29 июня 2009

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

11 голосов
/ 18 июня 2010

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>
10 голосов
/ 28 июля 2010 
.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

5 голосов
/ 22 сентября 2016

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

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

td {
  word-wrap: break-word;
}
3 голосов
/ 15 августа 2016

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

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

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

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

2 голосов
/ 25 октября 2014

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

т.е. 

td {
  width: 1px;
}

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

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

1 голос
/ 15 июня 2018

использовать 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>
1 голос
/ 08 декабря 2010

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

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

Страница:
...