CSS Wrapping
Learning outcomes:
- What is wrapping
- The
break-word
andtext-overflow
properties
Introduction
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!
What is wrapping?
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;
}
Break overflowing words
The property word-break
is used to control how overflowing words are treated. The values include:
normal
- default value, serves to overflow the word as normal.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.
Spread the word
Think that the content was awesome? Share it with your friends!
Join the community
Can't understand something related to the content? Get help from the community.