How to wrap or break long text/word in a fixed width span with CSS?

Spread the love

Sometimes, we want to wrap or break long text/word in a fixed width span with CSS.

In this article, we’ll look at how to wrap or break long text/word in a fixed width span with CSS.

To wrap or break long text/word in a fixed width span with CSS, we set the word-wrap property.

For instance, we write

<span>VeryLongLongLongLongLongLongLongLongLongLongLongLongExample</span>

to add a span.

Then we write

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

to set the word-wrap property to break-word to break up the long line of text when it overflows the width.

To wrap or break long text/word in a fixed width span with CSS, we set the word-wrap property.