Languages
[Edit]
EN

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

15 points
Created by:
Root-ssh
121420

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.

Screenshot:

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>
<html>
<head>
  <style>

    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 */
    }

  </style>
</head>
<body>
  <div class="text">
    Very long text here, Very long text here, 
    Very long text here, Very long text here
  </div>
</body>
</html>

 

CSS

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.

❤️💻 🙂

Join