Languages
[Edit]
EN

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

3 points
Created by:
Root-ssh
68500

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:

<style>

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

</style>

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

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

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

 

Native Advertising
50 000 ad impressions - 449$
🚀
Get your tech brand or product in front of software developers.
For more information contact us:
Red dot
Dirask - friendly IT community for everyone.

❤️💻 🙂

Join