Загорніть текст у тег <td>

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

Щоб обернути текст TD

Спочатку встановити стиль таблиці

table{
    table-layout: fixed;
}

потім встановіть TD Style

td{
    word-wrap:break-word
}

HTML-таблиці підтримують стиль css "layout-layout: fix", який не дозволяє користувачеві агенту адаптувати ширину стовпців до їх вмісту. Ви можете скористатися цим.

Я вважаю, ви стикалися з вивором 22 таблиць. Таблиці чудово підходять для загортання вмісту в табличну структуру, і вони роблять чудову роботу "розтягування" для задоволення потреб вмісту, який вони містять.

За замовчуванням комірки таблиці розтягуються, щоб відповідати вмісту ... таким чином ваш текст просто робить його ширшим.

Є кілька рішень.

1.) Ви можете спробувати встановити максимальну ширину на TD.

<td style="max-width:150px;">

2.) Ви можете спробувати помістити текст у обгортковий елемент (наприклад, проміжок) та встановити на ньому обмеження.

<td><span style="max-width:150px;">Hello World...</span></td>

Будьте в курсі, що старіші версії IE не підтримують min / max-width.

Оскільки IE не підтримує максимальну ширину, вам потрібно буде додати хак, якщо ви хочете його змусити. Існує кілька способів додати хак, це лише один.

Під час завантаження сторінки, лише для IE6, отримайте відображену ширину таблиці (у пікселях), потім отримайте 15% від цього та застосуйте її як ширину до першого TD у цьому стовпчику (або TH, якщо у вас є заголовки) знову в пікселях .

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>

.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

Це працювало для мене з деякими рамками css (дизайн дизайну матеріалів [MDL]).

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

td {
  word-wrap: break-word;
}

використовувати 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>

Це працює дуже добре:

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

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

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

У мене були деякі з моїх td:

white-space: pre;

Це вирішило це для мене:

white-space: pre-wrap;

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

тобто

td {
  width: 1px;
}

Це експериментально, і я дізнався про це під час занять проб і помилок

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

Можливо, що це може спрацювати, але це може виявитися трохи неприємністю в якийсь момент майбутнього (якщо не відразу).

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

Мінус - додаткова розмітка, яка використовується для презентації.

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

Спробуйте тестувати з реченнями на кшталт "Контрпозиція забобонна у визначених обставинах".

Застосуйте класи до своїх 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>

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