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

Question

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

Большинство комментариев в коде на самом деле являются пагубной формой дублирования кода.

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

Я думаю, что в конечном итоге многие люди просто исключают их, особенно те чудовища цветочных ящиков.

Гораздо лучше сконцентрироваться на том, чтобы сделать код читабельным, рефакторинг по мере необходимости и свести к минимуму идиомы и причуды.

С другой стороны, многие курсы учат, что комментарии очень важны, чем сам код, что приводит к тому, что следующая строка в добавляет один к стилю комментирования invoiceTotal .

121

html-table html css word-wrap

задан Brenton Scott 29 June 2018 в 11:01

6 ответов

Другие вопросы по тегам:

html-table html css word-wrap

Похожие вопросы:

score 1 · Answer 1

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

<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 заключается в том, что, как указывали другие, обычно расширяется для размещения содержимого, тогда как может быть задано - и ожидается, что - заданная ширина; overflow: hidden предназначен, но не может скрывать то, что в противном случае привело бы к расширению .

Я бы рекомендовал использовать заголовок для отображения текста, присутствующего (или обрезанного) в визуальной ячейке, чтобы текст был по-прежнему доступен (и если вы не хотите / не нуждаетесь в людях, чтобы его видеть, то зачем он вообще , Наверное ...).

Также,

score 0 · Answer 2

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

score 47 · Answer 3

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

score 28 · Answer 4

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

При загрузке страницы, только для IE6,

score 11 · Answer 5

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>

score 10 · Answer 6

.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