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

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

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

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

Ответы [ 13 ]

1 голос
/ 29 июня 2009

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

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

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

0 голосов
/ 17 апреля 2018 
<!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 голосов
/ 29 июня 2009

Примените классы к своим 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>
Страница:
...