Ancho mínimo, ancho máximo css usa el ancho más pequeño

Question

Muy bien, entonces lo que espero hacer es crear un DIV que se autosize en función del contenido que contiene, pero debe usar el menor ancho posible. No tengo ni idea de cómo hacer esto.

Por lo tanto, si tengo una etiqueta DIV que tiene 3 caracteres que sin duda tiene menos de 200 px de ancho, lo que quiero es que div sea entonces 200px. Si hay mucho más texto, me gustaría que aumente el tamaño automáticamente para que el texto encaje.

** Es esto posible con sólo CSS *** *? ****

** ** ACTUALIZACIÓN

Vamos a ver si lo puedo explicar esto mejor. Tengo un DIV:

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

lo que espero que suceda es decir, si se cambia el texto seguirá siendo al menos 200 px de ancho. De esta manera:

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

Pero si era incluso el texto más largo que el primer ejemplo sería continúan expandiéndose hacia el exterior más allá de 200 píxeles de ancho:

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

Sin embargo, tengo un límite (cantidad limitada de espacio) que puede ir, así que necesito ponerle un ancho máximo. ¿Tiene sentido o necesito aclarar las cosas más?

Answer 1

El problema es que, dado que <div> s son elementos de nivel de bloque, no cambian de tamaño automáticamente para ajustarse a su contenido, aunque su ancho se puede definir explícitamente. Los elementos en línea como <span> hacen tamaño automático para ajustarse a su contenido, pero no aceptan definir su ancho a través de CSS. La solución consiste en hacer que su <div> se comporte de alguna manera como una celda de tabla.He aquí un ejemplo:

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> 

(Nota cómo había que añadir <br/> s antes de que los <div> s porque son ya no es completamente a nivel de bloque) .
Así es como se ve cuando se procesa: Esto parece funcionar en Firefox, Chrome e IE8 (para IE8 necesita especificar un DOCTYPE). Espero que haya ayudado!

Answer 2

Si he entendido lo que preguntas acerca correctamente, <div> s son bloques de elementos, lo que significa que por defecto que va a tomar una una línea entera - 100% de la anchura de la pantalla. Intente utilizar el elemento <span> en su lugar.

Espero que haya sido útil, pero podemos ayudarlo más si especifica qué comportamiento está tratando de lograr o lograr.

Answer 3

Puede "encoger y envolver" un div de diferentes formas. El más fácil es probablemente el display: inline;, pero un flotador se comportará como usted describe también.

Consulte http://haslayout.net/css-tuts/CSS-Shrink-Wrap para obtener más información y más métodos.

Si desea que el ancho mínimo sea 200px (contradictorio con su primer párrafo) puede usar min-width: 200px; junto con display: inline-block por ejemplo.