CSS: перенос целых блоков текста в соответствии с шириной контейнера.

У меня есть такой блок текста:

<div>
    <span class="part-1">Some text.</span>
    <span class="part-2">Some text.</span>
</div>

Родительский элемент div имеет плавную ширину. Как сделать так, чтобы два элемента span оставались в одной строке, если контейнер достаточно широкий, чтобы оборачивать их, если не хватает места, но не оборачиваться внутри элементов span?

Другими словами, .part-2 должен быть либо на одной линии с .part-1, либо ниже его, но всегда цельным.

РЕДАКТИРОВАТЬ: Важной частью является то, что .part-2 не должно переполнять контейнер, что происходит, если используется white-space: no-wrap.


css word-wrap
person cincplug    schedule 22.10.2015    source источник
comment
Почти уверен, что с ограничениями, которые у вас есть, это невозможно.   -  person Paulie_D    schedule 22.10.2015
comment
Вот это я и боялся услышать :)   -  person cincplug    schedule 22.10.2015

Ответы (2)


arrow_upward
3
arrow_downward 

<style>
    .unbreakable{
        white-space: nowrap;
    }
    #container{
        overflow:hidden;
    }

</style>

<div id="container">
    <span class="part-1 unbreakable">Some text.</span>
    <span class="part-2 unbreakable">Some text.</span>
</div>

Используя свойство css пробела, вы можете определить, как может происходить перенос внутри элементов. Использование nowrap предотвратит перенос пробелов.

РЕДАКТИРОВАТЬ: добавлено скрытое переполнение, поэтому текст не выходит. Вы можете использовать прокрутку, чтобы добавить полосы прокрутки.

person Salketer    schedule 22.10.2015
comment
Извините, я уже пробовал "white-space: no-wrap", но я забыл сказать, что мне также нужен второй блок, чтобы не переполнять контейнер :) - person cincplug; 22.10.2015
comment
Отредактировано. Пожалуйста, объясните более точно, что вы хотите в своем посте? - person Salketer; 22.10.2015
comment
Конечно. Итак, вот требования: 1. без переполнения (без скрытых, без полос прокрутки, без авто, без ничего) 2. элементы span либо встроенные, либо один под другим, в зависимости от ширины родителя 3. без переноса внутри элементов span - person cincplug; 22.10.2015

arrow_upward
0
arrow_downward

Flexbox может быть, но вы все еще получаете переполнение.

Хм...

div {
  margin: 40px auto;
  display: flex;
}
.flex-title {
  display: flex;
  flex-wrap: wrap;
}
.flex-title > span {
  white-space: nowrap;
  padding: 0 1em;
  border: 1px solid grey;
}
<div class="flex-title">
  <span class="part-1">Lorem ipsum dolor sit amet.</span>
  <span class="part-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, enim!</span>
</div>

person Paulie_D    schedule 22.10.2015