Wie kann ich die Größe dynamisch ein DIV-element Breite zu passen, dessen text-Inhalt?
Lassen Sie uns sagen, dass ich diese HTML-code-snippet:
<div id="container">
<div id="textContent">Text Content Te</div>
<div id="anotherText">Another Text Content</div>
</div>
Original-HTML-Ausgabe http://img26.imageshack.us/img26/1571/beforeeffect.gif
Frage ich mich, wie konnte ich dynamisch die Größe der div
's textContent
Breite, so dass es passt seine text-Inhalte schön (weder der text wird Verpackung noch scrollen noch abgeschnitten).
Gewünschte HTML-Ausgabe http://img26.imageshack.us/img26/5851/desiredeffect.gif
Ich bin offen für jede Lösung, die mit Hilfe von CSS und/oder JavaScript.
- Sie möchten ein div-Element ohne horizontale scroll-Balken??
- gefloateten Elemente shrink-wrap-wenn es das ist, was Sie brauchen, es ist nicht klar, was du meinst, wenn du nicht wickeln, auch wenn Sie dies tun wollen, indem Sie die CSS-oder JS.
- Danke für dein feedback. Ich bearbeitet die Frage, um deutlicher zu sein mit dem, was ich erreichen will. Kein scrollen und ich bin offen für CSS-oder JS-Lösung (aber ich bin froh zu Wundern, wenn es getan werden könnte, per CSS vollständig).
Du musst angemeldet sein, um einen Kommentar abzugeben.
Vorausgesetzt, die Inhalte passen würde ohne überzulaufen, können Sie ein Schwimmer ohne eine Breite gesetzt (die Breite ist nicht erforderlich, in CSS 2.1 oder höher). Ohne mehr Details kann ich nicht empfehlen, wo oder was es andere Eigenschaften, um die gewünschte Wirkung (z.B. Schwimmer Schwimmer nach unten um die folgenden Inhalte, so legen Sie es am Anfang eines Absatzes).
Wenn sind Sie nicht besorgt, mit dem Effekt, die perfekt Aussehen auf alten Browsern wie Internet Explorer, könnten Sie
display: table
oderdisplay: table-cell
, mit der Einschränkung, dass Tabellen nicht überlaufen: Sie Strecken. Die Streckung kann wünschenswert sein, wenn Sie wollen, um zu vermeiden, überlauf von Ihr div -, aber lassen Sie es overlow den viewport -- zB eine film-strip, der scrollt horizontal. In diesem Fall altCognito Vorschlag vonwhite-space: nowrap
wäre sehr nützlich.Wird dies den trick tun (obwohl Sie wahrscheinlich sollte genauer in den divs, die Sie ändern möchten. Dies bedeutet, dass die divs, die Sie tun dies auf nicht irgendwelche Zeilenumbrüche, es sei denn, Sie geben diese selbst. Aber ich nehme an, du bist mit diesem für Etiketten, so dass Sie sollten alle gesetzt.
Ein Beispiel sehen.