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.

Answer 1

如果您使用的是基于webkit的浏览器，则可以使用-webkit-line-clamp

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

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

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

在不使用-webkit-line-clamp

的情况下，为所有浏览器使用以下问题中提供的选项

Clamping lines without '-webkit-line-clamp'

Answer 2

我从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;
}

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

2 个答案: