Html – How to wrap or break long text/word in a fixed width span

csshtml

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?

Best Answer

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>

Related Solutions

Html – How to wrap text in a pre tag

The answer, from this page in CSS:

pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

Html – How to wrap text of HTML button with fixed width

I found that you can make use of the white-space CSS property:

white-space: normal;

And it will break the words as normal text.

Best Answer

Related Solutions

Html – How to wrap text in a pre tag

Html – How to wrap text of HTML button with fixed width

Related Topic