2010-10-25 8 views
12

Estoy reconstruyendo un menú desplegable similar a un cuadro <select> usando div's y jquery. El div que contiene los elementos desplegables debe tener un ancho mínimo, pero no ancho máximo, ya que debería crecer junto con el más ancho de la lista (así que si tengo un elemento muy largo como '[Este es el artículo más largo dentro del contenedor]', todo el contenedor debe ser tan ancho como esta entrada.¿CSS CSS de espacio en blanco no aumenta el ancho?

Ahora casi obtengo lo que quiero, usando white-space:nowrap para cada artículo dentro del contenedor, para que el texto de un artículo no continúe en una nueva línea. Usar es el texto que sale de la caja utilizando, en lugar de dejar que la caja crezca a lo largo del texto. No puedo resolver cómo solucionar este problema. Ya probé text-overflow:ellipsis, pero parece que simplemente oculta el texto sobrecargado y agrega tres puntos (...) al final.

Así que aquí está mi problema en pocas palabras: ¿cómo puedo permitir que un div crezca junto con el texto dentro de él, cuando se aplica white-space:nowrap, en lugar de dejar que el texto salga de él? No quiero ocultar el texto usando overflow:hidden, quiero mostrar toda la cadena ..

¡Gracias de antemano!

Respuesta

19

Los anchos de los elementos de los bloques no dependen de su contenido en el modelo de disposición estática de CSS normal. Puede obtener ‘retráctil para el montaje’ comportamiento como parte de otras propiedades de diseño:

  • float: left
  • position: absolute
  • display: inline-block
  • mesa

suponiendo que no explícita width se establece.

+0

Gracias por su respuesta. El problema es que el contenedor del artículo ya está configurado para "reducir para ajustar", es por eso que no puedo encontrar una solución a mi problema. Tengo que encontrar una manera de expandir el elemento div cuando el espacio en blanco: hace el nowrap el texto sale de la caja, de lo contrario no parece funcionar porque el contenedor del artículo se encogerá demasiado y se ocultará el texto sobrecargado. – carlo

+1

¿Qué método está utilizando para obtener el ajuste por contracción? Ejemplo no funcional? – bobince

+0

Utilidad al momento. Upvoted. – tmslnz

1

Tuve un problema similar, se resolvió especificando el valor de relleno en px en lugar de porcentaje.

+1

Es poco probable que esta sea una solución determinista para el problema de OP y todos los problemas similares. ¿Podría publicar algún código que demuestre esto? Esto hubiera sido mejor como un comentario. – 8bitjunkie

+0

Si un elemento tiene un ancho o una altura porcentual y el ancho/alto de los padres depende del ancho/alto de sus hijos, esto puede ser la causa de errores extraños en el espacio en blanco. – Sumurai8

+0

@MaxMommersteeg No veo cómo esta respuesta cae en esa categoría. – Sumurai8

1

¿Hay un conjunto de ancho máximo en cualquiera de los elementos principales de la selección?

Esto detendría el funcionamiento de la propiedad de espacio en blanco. pantalla: la tabla anula un ancho máximo si se establece uno sin embargo.

+0

Sí, ese era mi problema. – KthProg

Cuestiones relacionadas