Angenommen, ich habe einen äußeren Container unbekannter fester Breite und ein inneres Element wie folgt:
%Vor% Gibt es eine Möglichkeit, #inner vollständig zu verstecken (nicht nur abgeschnitten), wenn #outer nicht groß genug ist, um es vollständig mit reinem CSS anzuzeigen?
Dies ist mit reinem CSS nicht möglich, da Sie keine Bedingungen angeben können (wenn Sie keine IE .htc-Dateien verwenden;)). Sie müssen JS dafür verwenden und die Breite beider Elemente vergleichen.
Für Text können Sie verwenden: text-overflow:clip|ellispis;
Bearbeiten:
%Vor%könnte hilfreich sein.
BEARBEITEN:
Ich bereitete eine Geige für die Lösung von rampion vor. Beachten Sie, dass text-overflow mit einer benutzerdefinierten Zeichenfolge nur in FF funktioniert. Außerdem ist text-overflow noch nicht standardisiert. W3C gibt es derzeit als text-overflow-mode in sein Arbeitsentwurf . Siehe auch einen interessanten Artikel bei MDN .
Dies ist ohne JS durch Floats und Hinzufügen eines inneren Helferelements möglich:
%Vor%und css:
%Vor% Das innere Element wird nun unter dem Helfer eingeschlossen, wenn es nicht in die Breite des äußeren Elements passt, was bei .helper mit height: 100% und .outer mit overflow: hidden dazu führt, dass das innere Element nicht vorhanden ist sichtbar.
Sie könnten entfernen die 1px-Helferbreite, indem Sie stattdessen width: 0.01px verwenden, aber ich bin mir nicht sicher, ob das zu Browserkompatibilitätsproblemen führt.
Christophs Antwort ist wahrscheinlich am besten im allgemeinen Fall, aber in meinem Fall kannte ich den Textinhalt, aber nicht den Containerbreite, mit der ich eine zusätzliche Ebene der Trickserei hinzufügen kann:
HTML leicht ändern:
%Vor%Und mit dem folgenden CSS:
%Vor%Wenn sich die Breite des Containers ändert, wird der vollständige Text entweder ausgeblendet oder entsprechend angezeigt. Wenn der Text mehr als ein Wort enthält, wird der Text Wort für Wort versteckt, so dass etwas beachtet werden muss.