Text Überlauf Ellipsen auf div mit mehrere Spanne

Question

Ich habe folgende Struktur in Drop-Down-Vorschlägen für meine Autocomplete-Plugin

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

Die div folgende CSS-Eigenschaften hat -

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

Die Spannweite folgende Eigenschaften hat -

Ich bin nicht in der Lage zu verstehen, wo es schief gelaufen ist und fast versucht haben Alle SO-Lösungen haben bis heute ähnliche Probleme beantwortet. Ein verzweifelter Callout!

Update: http://codepen.io/shreeshkatyayan/pen/wzPYvO CSS-Struktur - aus offensichtlichen Gründen nicht arbeiten.

Answer 1

Hier sind zwei Beispiele, die helfen können.

Fügen Sie den Überlauf anstelle von div dem Bereich span hinzu, der jedem Bereich die Ellipseneigenschaft verleiht.

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

oder der div die Ellipsen-Eigenschaft anstelle der Spanne zu geben, entfernen float: left von der Spannweite und eine Breite an den div hinzuzufügen.

div.two { 
display: inline-block; 
overflow: hidden; 
white-space: nowrap; 
text-overflow: ellipsis; 
width: 200px; 
} 

div.two span { 
margin-right: 10px; 
//float: left; 
} 

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

Answer 2

Es gibt auch mehrere jQuery-Plugins, die sich mit diesem Thema beschäftigen, aber viele nicht mehrere Textzeilen verarbeiten. Folgende Arbeiten:

• http://pvdspek.github.com/jquery.autoellipsis/
• http://dotdotdot.frebsite.nl/
• http://keith-wood.name/more.html
• http://github.com/tbasse/jquery-truncate