Line break in a span with defined width?

Question

How can I break a line in a span once the width of the span is reached? I tried max-width, but this did not work, the span is always as long as the text.

Ideas?

Thanks!

Answer 1

By default, <span> elements are 'inline', and will always grow to the size of their content. You need to explicitly declare the <span> to be display: block; or display: inline-block;.

Answer 2

span { 
    display:block;
    width:150px;
    word-wrap:break-word;
}