CSS related to overflow - What is analogous to text-overflow for html elements?

Question

<div className="abcd">
<span>
<span className="abc"></span><span className="abc"></span><span className="abc"></span><span className="abc"></span><span className="abc"></span><span className="abc"></span>
</span>
</div>

If i set a max height for the div, similar to text-overlfow: 'ellipsis', how can i show some span elements and then show ellipsis alongside it.

span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        }

This does not work. Within the div i would like ellipsis to appear when max-height is reached. This works fine for <p className"para">blahblahblah</p> So if we set get something like blahblah...

I want a similar result.

Could you please provide css as well for classes abc, abc1, abc2 and abc3 — Naga Sai A
– Naga Sai A, Commented Mar 8, 2018 at 22:19
the short answer is you cannot ... here is a similar question to get some idea of workaround : stackoverflow.com/questions/48868798/… — Temani Afif
– Temani Afif, Commented Mar 8, 2018 at 22:22

Naga Sai A · Accepted Answer · 2018-03-08 22:50:37Z

0

If you are using webkit based browsers, you can use -webkit-line-clamp

overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

https://codepen.io/nagasai/pen/vRYedp

Reference - Is vertical text-overflow possible with css3? and https://medium.com/mofed/css-line-clamp-the-good-the-bad-and-the-straight-up-broken-865413f16e5

Use options provided in below question for all browsers without using -webkit-line-clamp

Clamping lines without '-webkit-line-clamp'

answered Mar 8, 2018 at 22:50

Naga Sai A

11k1 gold badge24 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shruti Srivastava · Accepted Answer · 2018-03-08 23:11:48Z

0

I got the answer from How can I hide extra divs with an ellipsis?

.abcd {
    display: block;
    border: 1px solid;
    max-width: 140px;
    padding: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.abcd .abc {
    display: inline;
    overflow: hidden;
    text-overflow: ellipsis;
}

answered Mar 8, 2018 at 23:11

Shruti Srivastava

16513 bronze badges

Collectives™ on Stack Overflow

CSS related to overflow - What is analogous to text-overflow for html elements?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related