Froxx Froxx - 6 months ago 9
CSS Question

Always displaying spans under each other with CSS

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

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>

Comments