Проблема с переполнением текста в IE7

Question

Я делаю веб-игру с "элементами сортировки", используя jQuery, HTML и CSS. Хотя в FF, IE8, Opera, Chrome все работает нормально, у меня проблемы с переносом слов в IE7 внутри элементов блока.

Вот как это выглядит в IE7 ( неправильно ): Ссылка ( не может публиковать изображения как новый пользователь )

В IE8 поле с обернутым текстом будет просто расширяться, чтобы вместить его в одну строку без каких-либо переполнений. Извините, я не могу дать другую ссылку новому пользователю

Не обращайте внимания на порядок элементов, поскольку он случайный. Элементы динамически генерируются jQuery.

HTML код:

<div class="ui-sortable" id="area">
  <span class="object">: </span>
  <span class="object">1998- </span>
  <span class="object">ISSN 1392-4087</span>
  <span class="object">, </span>
  <span class="object">. </span>
  <span class="object">nepriklausomas savaitraštis buhalteriams, finansininkams, auditoriams</span>
  <span class="object">. </span>
  <span class="object">. </span>
  <span class="object">. </span>
  <span class="object">Vilnius</span>
  <span class="object">1998- </span>
  <span class="object"><em>Apskaitos, audito ir mokesčių aktualijos</em></span>
</div>

CSS-код (ненужная информация, например, шрифты и цвета удалены):

#area {
  min-height: 160px;
  width: 760px;
}
.object {
  display: block;
  float: left;
  text-align: center;
  width: auto;
}

Любые комментарии о том, почему IE7 делает это? Как сделать так, чтобы эти промежутки расширялись, чтобы вместить весь текст в одну строку в IE7, а не переносить текст или делать переполнения?

Answer 1

Я сам попробовал это в IE7, и когда вы просто добавили 'white-space: nowrap' в span.object, это должно решить проблему Плавающие элементы блока работают просто отлично, так что не меняйте это.

См. Изображение для результата теста: http://xs.to/image-B3F6_4BDE909D.jpg

Answer 2

У вас есть проблема. Поплавки и автоматические ширины просто не смешиваются. У вас также будут проблемы, когда речь идет о чем-то более широком, чем ширина.

Почему бы не оставить его встроенным? Если вам нужна коробка, добавьте отступы:

span.object { padding: 6px; }

Редактировать: , если вы не хотите, чтобы они разбивали строки, добавьте:

span.object { white-space: nowrap; }

Гораздо проще, чем получить поплавки для выполнения этой конкретной задачи.