пробел: nowrap заставляет содержимое выходить за пределы ячейки

Question

У меня есть тд, где я объявляю white-space:nowrap;.Это предотвращает разрывы строк в тексте, но размер ячейки учитывает отсутствующие разрывы строк, и текст выходит за пределы td.Можно ли как-нибудь сделать учетную запись размера ячейки для white-space:nowrap;?

Мой код выглядит так:

<tr><td style="background-color: #0C264C;color: #FFFFFF; padding: 2px; margin: 2px; white-space: nowrap;" > 

<div style="float:left; text-align:left; width:50%;">Quarter</div> 

<div style="float:right; text-align:right; width:50%;">Thousands of Employees</div>

</td></tr>

tr не расширяется автоматически, а часть текста Thousands of Employeesрастягивается за пределами стола.Я нигде не объявляю ширину таблицы.

Answer 1

Обновление

Не видя всю вашу таблицу, о ней трудно судить, но сочетание nowrap, плавающих элементов и элементов блока будет трудно заставить его работать. Все эти элементы по-разному влияют на расположение элементов и расширение границ родительского элемента.

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

<table>
   <tr>
   <th>Quarter</th>
   <th class="right">Thousands of Employees</th>
   </tr>
   ....
</table>

А затем поместите это в свой CSS:

tr th { width: 50%; white-space: nowrap }
th.right { text-align: right }

Оригинальный ответ

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

Попробуйте удалить ширину (width:auto) или используйте это в своем CSS:

#idOfYourTable {    
    min-width: 800px; /* or whatever width you originally had set */
}

И затем использование width: 800px в таблице стилей только для IE6, так как ширина IE6 в любом случае действует как min-width. Возможно, вам придется поиграть с некоторыми другими правилами, чтобы IE6 играл хорошо.

Answer 2

Пробел между html-элементами должен игнорироваться.Итак, у вас есть непрерывный блок кода Nowrap.

Чтобы обойти это, используйте символ Юникод для Zero Width Space.Это разделит ваш код без дополнительного пространства.

<div style="float:left; text-align:left; width:50%;">Quarter</div>&#8203;
<div style="float:right; text-align:right; width:50%;">Thousands of Employees</div>

Если по какой-то причине вы не можете использовать код Unicode, вы можете попробовать html-сущность  , которая является тонким пробелом.Это, однако, добавит дополнительное пространство в ваш вывод html.

Answer 3

РЕДАКТИРОВАТЬ: сначала неправильно понял ваш вопрос.

Я думаю, что вы не сможете добиться того, чего хотите, не предоставив контейнерам фиксированные размеры. Хак может заключаться в том, чтобы включить какой-то дополнительный замаскированный элемент в той же строке, что и ваш текст, например спейсер или белую точку, заставляя контейнер принимать это во внимание, но это действительно неприятный хак.