CSS - cut with dots (...) overflowing text outside element

15 points
Created by:

In this article, we're going to have a look at how in a simple way cut overflowing text from an element in pure CSS.

Quick solution:

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

Note: JavaScript approach can be found here.


Overflowing text cut using CSS.
Overflowing text cut using CSS.

Practical example with explanation

The simplest way is to use text-overflow style property with ellipsis value.

This approach will be working only if:

  • element size will be defined clearly (e.g. with width style property, when some parent will exceed element size or specific layout will force element to have proper size),
  • when text wrapping will be disabled (e.g. white-space: nowrap; does it),
  • content overflowing will be disabled (e.g. overflow: hidden; does it).

Note: presented in this article text shortcutting does not work if display: flex; style property is used with element.

To solve the display: flex; problem text should be wrapped with additional element that uses then text-overflo: ellipsis.

Check simple the problem solution here.

Runnable practical example:

// ONLINE-RUNNER:browser;

<!doctype html>

    div.text {
        padding: 5px;
        width: 200px; /* <----------------- required depeding of layout or parent */
        border: 1px solid red;
        text-overflow: ellipsis; /* <------ required */
        white-space: nowrap; /* <---------- required */
        overflow: hidden; /* <------------- required */

  <div class="text">
    Very long text here, Very long text here, 
    Very long text here, Very long text here



Native Advertising
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂