CSS-Text-Auslassungszeichen bei der Verwendung von divs mit variabler Breite

Ich frage mich, ob es eine Möglichkeit gibt, Text in einem floating div gain Ellipse zu haben, wenn der Elternteil Div und benachbarten div nicht genügend Platz zulassen. Zum Beispiel:CSS-Text-Auslassungszeichen bei der Verwendung von divs mit variabler Breite

<style> 
.parent-div { 
    width: 100%; 
    border: 1px; 
    padding: 4px; 
} 
.text-div { 
    float: right; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;  
} 
.icon-div { 
    float: left; 
} 
</style> 
<div class="parent-div"> 
    <div class="text-div">This is text I'd like to truncate when space doesn't permit</div> 
    <div class="icon-div">X</div> 
</div>

Bisher wenn ich das Browserfenster Crunch, wird die übergeordnete Div kollabieren, dann der weiße Raum in Text-div verschwinden wird, aber wenn kein Platz mehr ist, treten die Auslassungs nie in. Das einzige, was ich tun kann, ist ein Ereignis auszulösen, wenn das Fenster seine Größe ändert und dynamisch eine neue feste Breite auf Text-Div setzt, aber das fühlt sich einfach unelegant an, besonders wenn man Padding und andere benachbarte Artefakte in Betracht zieht subtrahieren, um eine richtige Breite zu erhalten.

Irgendwelche Gedanken zu diesem?

Hier ist ein jsFiddle Demo: http://jsfiddle.net/Blender/kXMz7/

Quelle

2012-09-29 Anthony

Wenn Sie sich über die Unterstützung älterer Browser nicht kümmern, können Sie Flexbox verwenden diese recht einfach zu machen: http: // jsfiddle. net/Blender/kXMz7/1/ – Blender

Das funktioniert perfekt Blender! Ich unterstütze ältere Browser aktiv nicht, das funktioniert also gut. :) Anscheinend funktioniert es nicht, wenn es in einen Tisch gestellt wird, aber ich kann das umgehen. Vielen Dank! Wenn Sie Ihre Antwort separat veröffentlichen, werde ich sie als die richtige markieren. – Anthony

Sie flexible Orgfeldlayout CSS3 ist dies ziemlich intuitiv tun verwenden können:

.parent-div { 
    display: flex; 
} 

.text-div { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;  

    min-width: 0; 
} 

.icon-div { 
    flex: 1; 
}

Demo: http://jsfiddle.net/Blender/kXMz7/1/

Quelle

2012-09-29 21:37:49 Blender

Funktioniert perfekt! Danke Blender! – Anthony

+1, da die Lösung perfekt funktioniert. Seien Sie sich dessen bewusst, dass das Flexible Box Layout immer noch in der Kandidatenempfehlungsphase ist und nicht allgemein unterstützt wird. Es wird in Chrom, Firefox, Safari mit Vendor-Präfix funktionieren. Internet Explorer hat diese Funktion erst in IE10 unterstützt. http://caniuse.com/flexbox – Michael

War lange auf der Suche nach dieser Antwort! Danke :-) – Rikki

Meine Firma bietet keine Unterstützung für CSS3 noch , aber ich konnte das Problem mit einer anderen Lösung lösen. Wenn Sie das Attribut float nur auf das Symbol div anwenden und es zuerst im HTML-Code platzieren, bleibt das andere div vertikal ausgerichtet, während es abgeschnitten wird, wenn nicht genügend Platz vorhanden ist.

Beispiele: (Symbol rechts) http://jsfiddle.net/qftWN/, (Symbol links) http://jsfiddle.net/Nr2NN/

Quelle

2013-06-20 00:51:04

danke! Dieser nette Trick funktioniert und hat mir eine Menge Ärger erspart. :) – gnclmorais

vielen Dank !! – user1110977

CSS-Text-Auslassungszeichen bei der Verwendung von divs mit variabler Breite

Antwort

Verwandte Themen