CSS
handbook

text-overflow

lets take a look at the text-overflow property

text-overflow is the CSS property that we use to control what happens when our text overflows its container element. Since text normally doesn’t overflow and always takes up new line, we need to declare four extra properties to make it overflow: white-space: nowrap; overflow: hidden; display: inline-block; width: calc(100%);

taught by Tina May

we can use text-overflow so that when the text overflows, it gets trimmed at the edge of the container element

We can use text-overflow so that when the text overflows, the rest of the text just get trimmed (truncated) at the edge of the container element.

text-overflow:

Oh hey there fellas!

What's brewing, good looking?

You miss 100% of the shots you never take.

we can use text-overflow so that when the text overflows, it shows three dots at the edge of the container element

We can use text-overflow so that when the text overflows, the rest of the text is represented by three dots at the edge of the container element.

text-overflow:

Oh hey there fellas!

What's brewing, good looking?

You miss 100% of the shots you never take.

explore all typography properties

Select any property below and we’ll show you step-by-step how to use the property, with video demo, tips and practical examples you can code for yourself.

color

font-family

font-size

font-style

font-weight

font

letter-spacing

line-height

list-style

text-align

text-decoration

text-indent

text-overflow

text-shadow

text-transform

vertical-align

word-spacing

Try it for yourself

HTML 

<div>
  <p class="style-1">Tuition is valuable. But you know what's invaluable? Intuition.</p>
  <p class="style-2">I know what to do. But in a much more real sense, I had no idea what to do.</p>
  <p class="style-3">This morning I saw a youtube video with a puppy riding a motorcycle. So my bar for stunning is pretty high.</p>
</div>

Tuition is valuable. But you know what's invaluable? Intuition.

I know what to do. But in a much more real sense, I had no idea what to do.

This morning I saw a youtube video with a puppy riding a motorcycle. So my bar for stunning is pretty high.

CSS

/* Change how the text overflows on the first paragraph*/

.style-1 { text-overflow: clip; }

/* Change how the text overflows on the second paragraph*/

.style-2 { text-overflow: ellipsis; }

/* Change how the text overflows on the third paragraph*/

.style-3 { text-overflow: clip; }

reults

Let's control how overflowing parts of the text is displayed on each paragraph element below. You can either truncate or add ellipsis to represent the overflowing parts.

Try these:

Copyright 2023