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

محمد کثیری picture محمد کثیری · Aug 14, 2013 · Viewed 232.8k times · Source

I want to create a span with a fixed width that when I type any thing in the span like <span>lgasdfjksdajgdsglkgsadfasdfadfasdfadsfasdfasddkgjk</span>, a long string of non-spaced text, the word(s) break or wrap to next line.

Any ideas?

Answer

Maxime Lorant picture Maxime Lorant · Aug 14, 2013

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>