Длинная строка распирает контейнер с min-width?

Есть у меня контейнер, для которого указан min-width, но не указан width.

Внутри него сначала идет строка breadcrumbs, а следом блок основного контента.
<div class="wrapper">
	<ul class="breadcrumbs">
		<li>one</li>
		<li>two</li>
		<li>three</li>
		<li>lorem ipsum dolor sit amet</li>
		<li>lorem ipsum dolor sit amet</li>
	</ul>
	<div class="content"></div>
</div>


body { text-align: center; }
.wrapper { display: inline-block; min-width: 400px; text-align: left; border: 1px solid #000; }
.breadcrumbs { background-color: #ddd; list-style: none; margin: 0; padding: 0; }
.breadcrumbs > li { display: inline; }
.breadcrumbs > li:before { content: ' > '; }
.breadcrumbs > li:first-child:before { content: ''; }
.content { width: 400px; height: 100px; background: #aaa; }
.content1 { width: 500px; }



Если цепочка breadcrumbs оказывается длинной, то, вместо того, чтобы переноситься, она начинает распирать контейнер.

Ширина блока .content задается из админки и он имеет право распирать контейнер. А вот breadcrumbs не должен распирать, а должен переноситься в случае необходимости.


Вот наглядный пример.


Задача вроде выглядит несложно, но что-то я запутался. Не получается победить…

Я знаю, можно было бы решить в пару строк javascript'а, но хотелось бы обойтись чистой версткой.
  • Вопрос задан
  • 3668 просмотров
Решения вопроса 1
@m-haritonov
Можно перенести .breadcrumbs внутрь блока .content.

Тогда .breadcrumbs будет иметь ширину не больше, чем .content, а в случае превышения этой ширины содержимое .breadcrumbs будет переноситься на следующую строчку. Это ведь то, что Вы имели ввиду?!

Сейчас Вы пытаетесь сделать так, чтобы блок .wrapper мог распираться блоком .content, но при этом не мог распираться блоком .breadcrumbs.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
MTonly
@MTonly
Веб-разработчик с 2002 года
Вынесите блок .breadcrumbs из блока .wrapper и жёстко задайте ему (.breadcrumbs) нужную ширину.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы