Выровняйте все поля в строке после применения пропуска слов в CSS

Question

У меня есть 2 spans внутри div: html:

<div class="main">
<span class="title"> Name</span>
<span class="values">/sys/fs/cgroup/sys/fs/</span>
</div>

вот как это выглядит: http://jsfiddle.net/tdrgz1yj/ как вы можете видеть size и volumeзаголовок выталкивается, когда у меня есть длинный текст для поля имени.Также я не могу увеличить ширину, потому что в реальном приложении поле «Объем» не в фокусе.Можно ли выровнять поля «Имя», «Размер» и «Объем» в одну строку даже после применения словосочетания?Можно ли сделать так, чтобы это выглядело как css?

Спасибо!

Answer 1

Да.Просто добавьте display: flex к .parent

Пример

Если вы хотите переместить длинный текст в одну строку с заголовком «Имя», установите *От 1009 * до .main.

Пример 2

Я предлагаю использовать span только для обтекания встроенных элементов.Вместо этого используйте divs:

.parent {
  padding: 20px 10px;
  margin: 0 0 20px;
  display: flex;
  width: 100%;
  box-sizing: border-box;
}

.parent div {
  margin-left: 20px;
}

.main {
  flex-basis: 200px;
  flex-grow: 1;
  flex-shrink: 0;
  display: flex;
}

.title {
  margin-right: 20px;
  display: inline-block;
}

.values {
  word-break: break-word;
}

<div class="parent">
  <div class="main">
    <div class="title">Name:</div>
    <div class="values">/sys/fs/cgroup/sys/fs//sys/fs/cgroup/sys/fs//sys/fs/cgroup/sys/fs/</div>
  </div>
  <div class="main">
    <div class="title">Size:</div>
    <div class="values">223k</div>
  </div>
  <div class="main">
    <div class="title">Volume:</div>
    <div class="values">111</div>
  </div>
</div>