Froxx Froxx - 2 years ago 66
CSS Question

Always displaying spans under each other with CSS

I have this concept:

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 Source

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>loooooooooooooooong foooooooooooooooooooo</span>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download