Always displaying spans under each other with CSS

Question

I have this concept: https://jsfiddle.net/berhqd9a/

First: How can I achieve to make foo1 and foo2 be displayed under each other? I thought, that's what the display: block should do?

Second: How can I achieve to make the long foo break instead of ignoring the div's border?

Answer 1

Updated fiddle

1. display: block can be used to show each span as a block or you can use <br> to break the line and bring elements to next line.

2. word-wrap: break-word; will break the long text.

#main {
  border: 1px solid black;
  width: 100px;
}
.wrapper {
  display: inline;
}
span {
  display: block;
  word-wrap: break-word;
}

<div id="main">
  <p class="wrapper">
    <span>foo1</span>
    <span>foo2</span>
    <span>loooooooooooooooong foooooooooooooooooooo</span>
  </p>
</div>