Shreesh Katyayan Shreesh Katyayan - 2 months ago 9
CSS Question

Text overflow ellipsis on div with multiple span

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.

Answer

Add the overflow to the span instead of the div, and also give the div a width.

span {
float: left;

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 100px;
}

https://jsfiddle.net/75rmaqwb/