CSS Wrapping

In the previous chapter we saw overflows in CSS and how the overflow property works to solve them. However, not always do we need the property overflow to solve our problem - sometimes we want the content to wrap instead.

In this chapter we will look over wrapping - a largely related concept to overflows in CSS.

Let's start!

Wrapping is to clip any overflowing text and wrap it to the next line.

Many of you might already know this term from your works in word processors or code editors - when you wrap text it flows to a new line.

CSS comes with a couple of properties to play around with text overflows. Each of them has its own specific use and set of values, but nonetheless operates on the same core principle - overflows.

We'll discover each property in a while, but before that let's consider the following example on which we will base each of the coming concepts.

div {
    width: 100px;
    background-color: gold;
}

The property word-break is used to control how overflowing words are treated. The values include:

1. normal - default value, serves to overflow the word as normal.
2. break-word - breaks the word so that it doesn't overflow.

break-word - break the word

Following we illustrate both these values starting with break-word. See how the overflowing word gets broken down.

div {
    word-wrap: break-word;
}

Notice how the word Disproportionation is broken into two pieces - hence the name break-word.

normal - stay normal

And now let's see normal in action:

div {
    word-wrap: normal;
}

As you can visualise, the value normal makes the overflowing word wrap as normal i.e a word can't be broken.

Add ellipses for overflowing text You might've seen many times extra content condensed in the following way This can be done using text-overflow which can take the following values. 1. clip 2. ellipses 3. normal Notice: You must set overflow on an element before setting text-overflow because it won't work without overflow.