Multiline span-behaving elements

Question

I want to display a list of complex, but fixed-size multiline elements, assuming that they will wrap the page line when line end is reached, making them appear by n in each row, when n depends on page width. Something like:

Mary had    Mary had    Mary had
a little    a little    a little
LAMB        LAMP        WHISKEY


Mary had
a little
TOO MUCH

How should I do that?

Answer 1

inline-block spans should do it:

body {
  font-family: sans-serif;
}
#container span {
  display: inline-block;
  width: 5em;
  border: 1px solid black;
}

<div id='container'>
  <span>Mary had a little lamb</span>
  <span>Mary had a little lamb</span>
  <span>Mary had a little lamb</span>
  <span>Mary had a little lamb</span>
  <span>Mary had a little lamb</span>
  <span>Mary had a little lamb</span>
  <span>Mary had a little lamb</span>
  <span>Mary had a little lamb</span>
  <span>Mary had a little lamb</span>
  <span>Mary had a little lamb</span>
  <span>Mary had a little lamb</span>
  <span>Mary had a little lamb</span>
  <span>Mary had a little lamb</span>
  <span>Mary had a little lamb</span>
  <span>Mary had a little lamb</span>
</div>
</body>

</html>

Answer 2

Use a combination of display: block; float:left; and your desired width and height.

span {
    display: block;
    float: left;
    height: 100px;
    width: 100px;
}