How can I wrap or break long text/word in a fixed width span?

Question

You can use the CSS property word-wrap:break-word;, which will break words if they are too long for your span width.

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

<span>VeryLongLongLongLongLongLongLongLongLongLongLongLongExample</span>

Try following css with addition of white-space:

span {
    display: block;
    word-wrap:break-word;
    width: 50px;
    white-space: normal
}

Like this

DEMO

  li span{
    display:block;
    width:50px;
    word-break:break-all;
}

By default a span is an inline element... so that's not the default behavior.

You can make the span behave that way by adding display: block; to your CSS.

span {
    display: block;
    width: 100px;
}