Как обернуть много <span>в <div>

Question

У меня есть <div> с жестко заданной шириной.Внутри <div> есть несколько сотен <span> тегов.Могу ли я обернуть промежутки так, чтобы междустрочный интервал был правильным и перенос между промежутками?Я использую word-wrap: break-word, и это выглядит беспорядочно.

Вот псевдокод.

span {
  margin: 2px;
  border: 1px dotted #cccccc;
  padding: 4px 10px 4px 10px; 
    }
div {
  padding: 5px;
  margin: 5px;
  border: 1px solid #cccccc;
  width: 800px;
  word-wrap: break-word;
}

<div>
  <span>stuff</span>
  <span>more stuff</span>
  <span>even more stuff</span>
  .
  .
  .
</div>

Спасибо!

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

Answer 1

EDIT (2017): Flexbox с намоткой display: flex; flex-wrap: wrap совместим с IE10 + (и Android 4.4+) и обеспечивает универсальное выравнивание как по горизонтали (выровнено, по левому или правому краю, space-around, по центру), так и по вертикали (align-items) с также универсальным интервалом между строками (align-content… если в общем случае установлена ​​высота).
Бонус: нет ~ 4px пробелов между элементами, о которых нужно заботиться, как при inline-block.Вы делаете в основном то, что хотите: без водостоков, flex: 1 1 auto или padding: 1rem, например
Шпилька для Flexbox по трюкам CSS
/ EDIT

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

Если я хорошо понял вашу проблему, вы хотите, чтобы столько строк соответствовало каждой строке, но не занимало бы промежуток, начиная с строки и заканчивая строкой.другая строка?
Тогда следующая скрипка: http://jsfiddle.net/MRR6P/ сделает свое дело.Попробуйте

span {
  line-height: 1.8;
  word-wrap: normal;
  display: inline-block;
}

Answer 2

не уверен на 100%, что вы имеете в виду, но если вы хотите, чтобы каждый диапазон отображался в отдельной строке, тогда заставьте их отображать блок

span { display: block; }

редактировать

возможно

white-space:nowrap;

как это? http://jsfiddle.net/xNndp/1/ за исключением случаев, когда ширина в div не указана

Answer 3

Самый быстрый способ, хотя и не идеальный, - использовать span { white-space: nowrap }. Конечно, если ширина <span> выходит за пределы ширины <div>, у вас будут проблемы. Вам нужно либо сделать прокрутку <div>, либо использовать JavaScript, чтобы исправить этот сценарий.

Другие display с параметрами white-space в спецификации CSS не являются кросс-браузерными, чтобы работать так, как вы хотите.

Answer 4

Пытаетесь ли вы сделать так, чтобы span действовал как div?

Если это так, вы можете использовать следующее:

display: block;

Пример:

http://jsfiddle.net/xNndp/

Answer 5

Попробуйте использовать display: block; в пределах css. Затем отрегулируйте поля / отступы для требуемого интервала.

Answer 6

Итак, если вы хотите, чтобы все эти промежутки занимали одну строку для себя (вот что я понимаю), вы должны использовать <p> с или <li> с, а не пролеты. Затем вы можете использовать высоту строки, чтобы контролировать расстояние между строками.

Черт, вы даже можете использовать <br> s, чтобы разбить ваши строки.

Другим способом было бы поставить ваши интервалы display:block, заставляя их пропускать строку, когда они заканчиваются.