Min-Breite, Max-Breite CSS verwenden kleinste Breite

Question

Alles klar, was ich hoffe ist, ein DIV zu erstellen, das basierend auf dem darin enthaltenen Inhalt automatisch skaliert, aber es sollte die kleinste mögliche Breite verwenden. Ich habe keine Ahnung, wie das geht.

Also, wenn ich ein DIV-Tag habe, das 3 Zeichen hat, die zweifellos unter 200px breit ist, was ich will, ist für das Div 200px dann sein. Wenn es viel mehr Text gibt, möchte ich, dass die Größe automatisch angepasst wird, damit der Text passt.

** Ist dies möglich, mit nur *** CSS *? ****

** UPDATE **

Lassen Sie mich sehen, ob ich das besser erklären kann. Ich habe ein DIV:

+++++++++++++++++++++++++++++++++ 
|-------------------------------| 
|-----text this longer text-----| 
|-------------------------------| 
+++++++++++++++++++++++++++++++++ 

Was ich hoffe, passieren zu müssen, ist, wenn der Text geändert wird es noch mindestens 200 Pixel breit sein wird. Wie folgt aus:

+++++++++++++++++++++++++++++++++ 
|-------------------------------| 
|-------------text--------------| 
|-------------------------------| 
+++++++++++++++++++++++++++++++++ 

Aber wenn es war sogar noch mehr Text dann das erste Beispiel würde es weiter nach außen erweitern Vergangenheit 200px breit:

++++++++++++++++++++++++++++++++++++++++++++++++++++++ 
|----------------------------------------------------| 
|-----text this longer texttext this longer text-----| 
|----------------------------------------------------| 
++++++++++++++++++++++++++++++++++++++++++++++++++++++ 

Aber ich habe eine Grenze (begrenzte Menge an Speicherplatz) dass es gehen kann, also muss ich eine maximale Breite darauf legen. Macht das Sinn oder muss ich etwas mehr klären?

Answer 1

Das Problem ist, dass seit <div> s Elemente auf Blockebene sind, werden sie nicht automatisch an ihren Inhalt anpassen, obwohl ihre Breite explizit definiert werden kann. Inline-Elemente wie <span> passen sich automatisch an ihren Inhalt an, aber sie akzeptieren keine Definition ihrer Breite durch CSS. Die Problemumgehung besteht darin, dass Ihr <div> sich wie eine Tabellenzelle verhält.Hier ein Beispiel:

CSS:

.widthlim { 
    min-width: 200px; 
    max-width: 1000px; 
    background-color: red; /*This is just for us to be able to see the width*/ 
    display: table-cell; 
    word-wrap: break-word; 
    word-break: break-word; 
} 

HTML:

Example 1:<br/> 
<div class = "widthlim"> 
Hello 
</div> 
Example 2:<br/> 
<div class = "widthlim"> 
Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello 
</div> 
Example 3:<br/> 
<div class = "widthlim"> 
Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello 
</div> 

(Beachten Sie, wie wir <br/> s vor dem <div> s hinzufügen mussten, weil sie nicht mehr vollständig auf Blockebene) .
Hier ist, wie das aussieht, wenn gerendert: Dies scheint auf Firefox, Chrome und IE8 (für IE8 Sie eine DOCTYPE angeben müssen) zu arbeiten. Ich hoffe, das hat geholfen!

Answer 2

Wenn ich verstanden, was Sie richtig sind gefragt, <div> s sind Blockelemente, die standardmäßig bedeutet, dass sie eine auf eine ganze Reihe nehmen werde - 100% der Bildschirmbreite. Verwenden Sie stattdessen das Element <span>.

Hoffe, dass geholfen hat, aber wir können Ihnen mehr helfen, wenn Sie angeben, welches Verhalten Sie versuchen oder erreichen.

Answer 3

Sie können ein div auf verschiedene Arten "schrumpfen". Am einfachsten geht es wahrscheinlich zu display: inline;, aber ein Float wird sich so verhalten, wie du es beschreibst.

Auschecken http://haslayout.net/css-tuts/CSS-Shrink-Wrap für Details und weitere Methoden.

Wenn Sie möchten, dass die Mindestbreite 200px beträgt (im Gegensatz zu Ihrem ersten Absatz), können Sie beispielsweise min-width: 200px; zusammen mit display: inline-block verwenden.