Фаерфокс + IE10. Как заставить встроенный блок соблюдать полную ширину его внутренних элементов float+overflow:hidden?

ОТРЕДАКТИРОВАНО 30.04.13: IE10, кажется, избавился от описанного поведения, и единственный браузер, в котором мы сейчас можем наблюдать это поведение, — это Firefox

Я хочу, чтобы один div (.side) располагался прямо внутри встроенного блока (.wrap), а другой div (.content) содержал длинную строку без переноса с переполнением текста: многоточие в случае переполнения. Также .wrap не должен быть шире своего контейнера, поэтому его максимальная ширина: 100%.

Когда ширина содержимого в .content в сочетании с шириной .side достаточно широка, чтобы быть шире, чем контейнер .wrap - содержимое в .content должно переполнять его.

И когда ширина содержимого в .content в сочетании с шириной .side меньше ширины контейнера .wrap - тогда не должно быть переполнения в .content, .wrap просто должно занимать ширину .content и .side вместе взятых. Вроде так, но не в Firefox и IE10. В этих двух браузерах ширина .wrap равна ширине самого широкого внутреннего блока. Но я ожидал, что .wrap будет учитывать ширину как .side, так и .content.

Вы можете увидеть это поведение здесь: http://jsbin.com/evamik/1/ , просто сделайте окно браузера достаточно широкое, и вы увидите переполнение текста в лаймовом div (.content). Если вы отключите overflow:hidden на .content, вы увидите, что ширина .wrap равна ширине .content, а ширина .side игнорируется.

Итак, как заставить .wrap соблюдать ширину как .side, так и .content?

HTML:

  <div class="wrap">
    <div class="side">
       side
    </div>
    <div class="content">
       nonwrappnonwrappingnonwrappingnonwrappingnonwrapping
    </div>
    <div class="clear"></div>
  </div>

CSS:

.wrap {
  background: lime;
  display: inline-block;
  max-width: 100%;
}
.side {
  float: right;
  background: orange;
}
.content {
  overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}  
.clear {
  clear: both;
}

Пример URL: http://jsbin.com/evamik/1/


css firefox internet-explorer-10
person Andrey    schedule 05.01.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Меня немного смущает этот вопрос. Пример jsbin, по-видимому, имеет желаемое поведение в IE10 в Windows 7. (То есть, .content div использует многоточие, когда окно слишком узкое, чтобы показать всю строку, и .side всегда отображается правильно как плавающее вправо, с .wrap родительским div подгонка дочерних элементов div, если окно позволяет отображать весь текст, и ширина 100%, когда окно достаточно узкое, чтобы вызвать переполнение текста.)

Отключение overflow:hidden; в div .content приводит к уродливому поведению, потому что без него text-overflow:ellipsis; не действует, а white-space:no-wrap; заставляет текст оставаться на одной непрерывной строке.

Обратите внимание, что text-overflow:ellipsis; работает ТОЛЬКО при использовании white-space:no-wrap; и overflow:hidden;. Это означает, что вы не можете использовать многоточие для многострочного текста. См. справочник MDN по CSS для text-overflow.

Если вы хотите обеспечить перенос текста вместо использования одной строки с многоточием, вы можете удалить white-space:no-wrap; и overflow:hidden; и добавить вместо них word-wrap:break-word;, что разобьет длинные слова, чтобы они соответствовали узким пробелам. См. справочник MDN по CSS для переноса слов.

person joanwolk    schedule 30.04.2013
comment
В IE10 (Win 8) - да, этой ошибки уже нет. Но он все еще существует в последней версии Firefox (20.0.1 — Win 7, 20.0 — Mac). После того, как вы посмотрите пример jsbin, я думаю, мой вопрос должен стать ясным. - person Andrey; 30.04.2013