CSS-Text-Überlauf Ellipsis wird nicht angezeigt

Question

Ich habe ein Div mit einigen inneren Inhalt, ich brauche eine Ellipse, wenn es überläuft. Ich habe das schon oft mit anderen Elementen gemacht, aber aus irgendeinem Grund verhält sich das nicht wie erwartet.

Außerdem habe ich white-space:nowrap; mit Absicht verlassen, weil der Inhalt dann nicht auf die nächste Zeile innerhalb der Spanne bricht, als Ergebnis sehe ich nur 2-3 Wörter, bevor die Ellipse beginnt. Ich möchte, dass sich der Text über die gesamte Höhe des übergeordneten Containers erstreckt und dass die Auslassungszeichen für Inhalte beginnen, die außerhalb dieser Grenzen vorhanden sind.

Hier ist ein funktionierendes Demo: http://jsfiddle.net/sadmicrowave/DhkSA/

CSS:

.flow-element{ 
    position:absolute; 
    font-size:12px; 
    text-align:center; 
    width:75px; 
    height:75px; 
    line-height:70px; 
    border:1px solid #ccc; 
} 

.flow-element .inner{ 
    position:absolute; 
    width:80%; 
    height:80%; 
    border:1px solid blue; 
    top:0px; 
    bottom:0px; 
    left:0px; 
    right:0px; 
    margin:auto; 
    text-align:center; 
} 

.flow-element .long{ 
    float:left; 
    height:50px; 
    width:100%; 
    line-height:12px; 
    border:1px solid red; 
    text-overflow:ellipsis; 
    overflow:hidden; 
} 

HTML:

<a class='flow-element' style='top:100px; left:50px;'> 
    <div class='inner'> 
    <span class='long'>Box 1 and some other content that should wrap and do some other stuff</span> 
    </div> 
</a> 

Kann jemand bitte helfen. Ich brauche so viel Text wie möglich innerhalb der rot umrandeten Spanne anzuzeigen, während ein Auslassungszeichen aufweist, wenn Textinhalt der Behälter überläuft ...

Vielen Dank im Voraus

Answer 1

Sie können text-overflow: ellipsis nicht anwenden Elemente (Span) Inline, kann es mit Blockelemente verwendet werden, nur (div)

und auch white-space:nowrap; verwenden, wenn text-overflow: ellipsis;

Check diese verwenden, habe ich konvertiert Ihre Innen Spanne, nur für Proof of concept

http://jsfiddle.net/3CgcH/5/

ich weiß nicht, div warum Sie Spanne verwendet haben, aber nach Ihrer Logik können Sie chang machen es, wie ich vorgeschlagen

Update:

jemand denken, wird in der Frage, dass, wenn i white-space: nowrap; setzen Element zu überbrücken dann die text-overflow: ellipsis: arbeitet kann so sein, ich falsch bin, aber es ist nicht der Fall, weil Frages hat float: left im span-Tag verwendet, was bedeutet, dass das span-Tag in einen Box-Block umgewandelt wird und wie ein normales Block-Level-Element funktioniert, was auch falsch ist, denn wenn Sie das Block-Element-Verhalten benötigen, dann verwenden Sie ein Block-Level-Element

Referenz:

http://www.w3.org/TR/CSS2/visuren.html#propdef-float

http://dev.w3.org/csswg/css3-ui/#text-overflow

Answer 2

hinzufügen white-space:nowrap; zu Ihrem .inner div.

Answer 3

hinzufügen:

white-space:nowrap; 

.flow-Element

dann die Überlauf-ellispsis Werke .long.

Answer 4

Ich denke, Sie werden feststellen, dass das Problem durch text-align: center verursacht wird;