Languages
[Edit]
EN

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

3 points
Created by:
Root-ssh
6253

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>

 

Checkout latest findings & news:

Checkout latest questions:

Checkout latest wiki articles:

Hey ūüĎč
Would you like to know what we do?
  • Dirask is a friendly IT community for learners, professionals and hobbyists to share their knowledge and help each other in extraordinary easy way.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Rockstar community members
Thank you for great work ūüĎć