Hacer texto envolvente dentro de un div totalmente posicionado

Question

Tengo un div completamente posicionado con texto dentro pero se desborda sobre el borde del ancho. Si utilizo el desbordamiento: oculto, el desbordamiento desaparece. Sin embargo, quiero que el texto se envuelva en varias líneas a lo largo de la altura.

¿Falta algo aquí? Gracias.

#absolute_div 
{ 
background-color: #8cc63f; 
border-top: 1px solid #fff; 
border-bottom: 1px solid #fff; 
padding: 0px 5px 0px 5px; 
width: 44px; 
height: 50px; 
} 

Answer 1

I en forma de horquilla alrededor con @ ejemplo jsFiddle de Alex para ilustrar (más) el punto que estaba haciendo.

El texto está envolviendo; sin embargo, has establecido una altura. Una altura rígida evitará que se expanda el div, que es lo que supongo que usted quería. La cantidad de texto que envuelve y llena el espacio va a depender en gran medida de su line-height, font-size y cualquier otro CSS que haya aplicado al contenido del contenedor.

En el violín que bifurqué, configuré font-size:10px; line-height:1 - Obtuve 5 líneas de texto envolventes y el contenido restante está oculto por los parámetros de altura/ancho que estableció en su declaración.

http://jsfiddle.net/Kbzga/

word-wrap, white-space, overflow:visible no lo que está buscando, a menos que no le importe la caja verde 44x50 con el texto derrame fuera de él, o barras de desplazamiento son probablemente. HTH

Answer 2

No del todo seguro de lo que quiere hacer, pero overflow:auto podría ser lo que está después.

#absolute_div 
{ 
background-color: #8cc63f; 
border-top: 1px solid #fff; 
border-bottom: 1px solid #fff; 
padding: 0px 5px 0px 5px; 
width: 144px; 
height: 50px; 
overflow:auto;  
} 

http://jsfiddle.net/jasongennaro/Vqukv/

Answer 3

Cuando se utiliza el posicionamiento absoluto, y establecer una altura y anchura, los contenidos no tienen efecto en la propia caja, por lo que sólo tiene que fijar un min-height: 50px, y crecerá con el texto como aparece aquí en este jsFiddle.

Answer 4

@lorenz; para envolver la palabra tiene que usar word-wrap propiedad en su div como dijo afshin en su comentario por ejemplo

#absolute_div 

    { 
     background-color: #8cc63f; 
     border-top: 1px solid #fff; 
     border-bottom: 1px solid #fff; 
     padding: 0px 5px 0px 5px; 
     width: 44px; 
     min-height: 50px; 
     overflow:hidden; 
     word-wrap:break-word; 
    } 

cheque esta http://jsfiddle.net/aE8cg/

Answer 5

Estaba teniendo un problema muy parecido a este por un tiempo.

Tenía una interfaz que recibía la entrada del usuario con pequeñas cantidades de HTML que luego la mostraba en el lateral para mostrar cómo le gustaría.

Mi problema era que había estado convirtiendo todos los espacios ingresados ​​por el usuario en  , quería hacer esto para que se pudieran ingresar espacios para formatear el texto; añadir guiones y cosas por el estilo.

El efecto, sin embargo, fue que se estaba desbordando en lugar de envolver el texto dentro del div. Una solución fácil es convertir dos espacios en lugar de   , y dejar espacios únicos solos.

Me doy cuenta de que probablemente esta no sea la misma causa para todos, pero espero que ayude a alguien.

Answer 6

Esto funcionó para mí ...

white-space: pre-wrap;  /* css-3 */ 
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ 
white-space: -pre-wrap;  /* Opera 4-6 */ 
white-space: -o-pre-wrap; /* Opera 7 */ 
word-wrap: break-word;