Пробелы в CSS: в настоящее время приводит к переполнению

Question

поэтому у меня есть контейнер с полем ввода и его описанием.В случае, если описание очень короткое, я бы хотел, чтобы оно было рядом с полем ввода, но в случае более длинного я не хочу, чтобы оно разбивалось на две строки.Я пытался решить это с пробелами: nowrap;свойство в описании, но проблема в том, что если описание очень длинное, оно переполняет контейнер.

Вот простая витрина: https://jsfiddle.net/mw2gpLqd/2/

<div class="container">
    <input type="text" />
    <span>Very long description which wraps to new line</span>
</div>

Есть лиспособ сделать описание, чтобы не быть разделенным на две строки, но все еще быть обернутым в случае, если это должно переполнить контейнер?

Спасибо!

Answer 1

Вы пробовали Блок дисплея?

.description {display:block;}

Answer 2

Вы должны использовать flex

Я отредактировал вашу скрипку, чтобы показать желаемое поведение - https://jsfiddle.net/defsrk9p/

или вот пример

body {
  background: white;
}

.container {
  width: 300px;
  border: 1px black solid;
  padding: 10px;
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
}

input {
  width: 200px;
}

<div class="container">
<input type="text" />
<span>[min]</span>
</div>

<div class="container">
<input type="text" />
<span>Longer description which wraps to new line</span>
</div>

<div class="container">
<input type="text" />
<span class="description">Very long description which wraps to new line</span>
</div>

<div class="container">
<input type="text" />
<span class="description">Even longer description which will overflow the width of the container, because it has the white-space: nowrap; property</span>
</div>

Answer 3

Просто обновите свой .description класс

.description {
  white-space: nowrap;
  display:flex;
  overflow: auto;
}

. Вы можете найти рабочий образец здесь: https://jsfiddle.net/6aw8L1v5/

Answer 4

Вы можете использовать свойство display: inline-block.

<div class="container">
    <input type="text" />
    <span style="display: inline-block;">
    Very long description which wraps to new line
    Very long description which wraps to new line
    Very long description which wraps to new line
    Very long description which wraps to new line
    </span>
</div>