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

3 points
Created by:

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

Quick solution:


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


Note: JavaScript approach can be found here.

Practical example with explaination

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

This approach will be woriking 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 {
        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 */

    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.

❤️💻 🙂