Top community members
All Wiki Articles Create Wiki Article

Welcome to Dirask IT community! ‚̧ ūüíĽ
We are community of people that helps each other.

If you think you have some skills to help others

help someone and become a part of our community - List Q & A

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

0 contributions
3 points

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>

 

0 contributions

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey ūüĎč
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more