Text overflow ellipsis on div with multiple span

Question

I have following structure in dropdown suggestions for my autocomplete plugin

<div> <svg>//some things here</svg> <span>My long text</span> <span>Some short text</span> </div>

The div has following CSS properties -

display: inline-block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100%

The span has following properties -

float: left;

I am unable to understand where it went wrong and have tried almost all SO solutions answered in similar problems till date. A desperate callout!

Update: http://codepen.io/shreeshkatyayan/pen/wzPYvO CSS structure - non-working for obvious reasons.

A non-working example isn't really very helpful, try to simplify your solution down to the smallest snippet you can that will still reproduce your problem. With what's been posted so far the best you can hope for are guesses at the solution. — DBS
– DBS, Commented Oct 4, 2016 at 15:23

akcan · Accepted Answer · 2016-10-05 10:10:00Z

Here are two examples which may help.

Add the overflow to the span instead of the div which will give each span the ellipsis property.

div.one { display: inline-block; width: 100%; } div.one span { float: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 75px; margin-right: 10px; }

Or to give the div the ellipsis property instead of the span, remove float: left from the span and add a width to the div.

div.two { display: inline-block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 200px; } div.two span { margin-right: 10px; //float: left; }

updated jsfiddle: https://jsfiddle.net/75rmaqwb/1/

Need the ellipsis based on cumulative width of both span. Sorry, but your solution doesn't answer the problem. Thanks anyways
I have update my code with a further two examples which may help. jsfiddle.net/75rmaqwb/1
Also note that if you set font-size:0 on the container (in order to control inter-span spacing by a means other than the container's font size), the ellipses will not appear, even though the spans have non-zero text size.
@JimCote In the second example, the ellipse is inside the div and not the span, so when giving the div a font-size of zero, the ellipse will not appear. The font-size is simply making the ... disappear.

Razia sultana · Accepted Answer · 2016-10-04 15:32:35Z

There are also several jquery plugins that deal with this issue, but many do not handle multiple lines of text. Following works:

Collectives™ on Stack Overflow

Text overflow ellipsis on div with multiple span

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related