CSS3 Text Overflow – A Way To Wrap Text

Buy ebook

CSS Mine

Get my e-book focusing on CSS3 and
modern web UI development.

Learn more

Text overflow is a way to limit text that exceeds the width of the element and to insert an ellipsis (three dots “…”).

text-overflow: ( clip | ellipsis | <_string_> );

When showing text-overflow: ellipsis in my lectures, I always get two reactions. One half of the audience is bored, saying: “Hm, I have been using this for two years already…” And the other half? Enthusiastically taking notes: “I must use this first thing tomorrow!”

However, the catch when using the ellipsis value is that it will apply to any single line of text in block elements and three dots (“…”) will be shown if the line overflows. Nevertheless, it is still a time saver.

Imagine a navigation bar where you do not want the text to be wrapped onto the next line. Plus, you do not know its length or the width of the box it is in.

In such a case, just extend the ellipsis declaration with two other declarations that will ensure that the text stays on one line:

text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

Try resizing the browser window at this example URL: cdpn.io/e/FeLkJ.

Browser Support

text-overflow: ellipsis is supported in all browsers, even in IE6, so there is no problem using it.


Content

Introduction

Introduction

On today’s frontend UI development

UI development transformations

Tools, technologies and workflows

Fallback strategies

CSS3 reference guide

Introduction

Text properties

Background properties

Border properties

Box properties

Media Queries

CSS transforms

CSS animations

CSS3 Layout

Another CSS3 Properties

Non-standard properties

End

End

Buy ebook

CSS Mine

Get my e-book focusing on CSS3 and
modern web UI development.

Learn more