it-swarm.com.ru

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

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

116
sagar

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

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

table{
    table-layout: fixed;
}

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

td{
    Word-wrap:break-Word
}
200
Jitender Mahlawat

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

47
Alsciende

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

27
scunliffe

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>
11
Costin
.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

10
Samuel Adam

Это сработало для меня с некоторыми CSS-фреймворками (облегченный дизайн материалов [MDL]).

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

td {
  Word-wrap: break-Word;
}
5
All Іѕ Vаиітy

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

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

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

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

3
Betty Mock

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

то есть.

td {
  width: 1px;
}

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

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

2
Harsh Vakharia

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

Возможно, это может сработать, но в какой-то момент в будущем (если не сразу) это может оказаться немного неприятным.

<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), указанная ширина таблицы не кажется создать ту же проблему.

Недостатком является дополнительная разметка, используемая для презентации.

1
David Thomas

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

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

1
John
<!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>
0
N Islam

Примените классы к своим 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>
0
Elle