Foros del Web » Creando para Internet » CSS »

Texto desborda div

Estas en el tema de Texto desborda div en el foro de CSS en Foros del Web. Hola buenas, me encuentro con el problema de que al hacer un echo en PHP de un texto, este se me muestra todo en una ...
  #1 (permalink)  
Antiguo 21/05/2009, 00:43
 
Fecha de Ingreso: diciembre-2007
Mensajes: 194
Antigüedad: 10 años
Puntos: 5
Texto desborda div

Hola buenas, me encuentro con el problema de que al hacer un echo en PHP de un texto, este se me muestra todo en una linea en vez de en varias, y me deborda el div que lo contiene.

El texto esta dentro de etiquetas <p> con un class para CSS.

Me gustaria saber como solucionar esto sin tener que recurrir a hacer saltos de lineas manuales, gracias!.
  #2 (permalink)  
Antiguo 21/05/2009, 01:03
 
Fecha de Ingreso: enero-2007
Mensajes: 97
Antigüedad: 10 años, 11 meses
Puntos: 1
Respuesta: Texto desborda div

prueba con nl2br($textoquetienesaltosdelinea)
  #3 (permalink)  
Antiguo 21/05/2009, 01:34
Avatar de nicolyto77  
Fecha de Ingreso: marzo-2007
Ubicación: Buenos Aires
Mensajes: 782
Antigüedad: 10 años, 8 meses
Puntos: 12
Respuesta: Texto desborda div

Holas

Sino podrias poner la propiedad Overflow: Auto; o sino Overflow: Scroll;

Es para que lo hagas con CSS, tal vez te sirva antes que recortar la cadena

EDITO: No prestar atencion... mezcle dos Posts... Perdon

Saludos
__________________
CabaSoft Networks

Última edición por nicolyto77; 21/05/2009 a las 01:36 Razón: Correccion...
  #4 (permalink)  
Antiguo 21/05/2009, 01:40
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: Texto desborda div

Si muestras un ejemplo del texto, el codigo CSS y el PHP (si lo hay) va a ser mas facil encontrar el problema.
__________________
- León, Guanajuato
- GV-Foto
  #5 (permalink)  
Antiguo 21/05/2009, 01:46
 
Fecha de Ingreso: diciembre-2007
Mensajes: 194
Antigüedad: 10 años
Puntos: 5
Respuesta: Texto desborda div

Cita:
Iniciado por phidalgo Ver Mensaje
prueba con nl2br($textoquetienesaltosdelinea)
Hola phidalgo, gracias por contestar, no me funciona, me hace lo mismo, sino me equvoco la funcion nl2br() inserta saltos de linea HTML donde hay saltos de linea en la cadena, pero no es lo que pretendo.

Lo que intento, es que un texto normal, escrito seguido, respete las dimensiones del div y cuando llege hasta el final salte a la siguiente linea. Este es el codigo:

Código:
$texto = "<div id=\"asd\"> 
         
            <div class=\"basico\"></div>
             
        <h3>B&aacute;sico</h3> 
             
        <p class=\"texto\">blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla.</p> 
		<p class=\"texto\">blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla.</p>
        </div> 

        <div>";
        
        echo $texto;
Cita:
Iniciado por Triby Ver Mensaje
Si muestras un ejemplo del texto, el codigo CSS y el PHP (si lo hay) va a ser mas facil encontrar el problema.
En eso estaba si, aqui te dejo el css que afecta, tened en cuenta que todo este cacho de codigo va dentro de un div llamado contenedor que a su vez va dentro de otro llamado principal.


Código:
#cuerpo #principal{
  background-color: transparent;
  width: 578px;
  height: 342px;
  float: left;
  overflow: hidden;
  text-align: left;
}

#cuerpo #principal #contenido{
  height: 342px;

}
PD: Exactamente el mismo codigo fuera de php funciona correctisimamente.

Última edición por MiLLeN; 21/05/2009 a las 01:52
  #6 (permalink)  
Antiguo 21/05/2009, 05:47
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: Texto desborda div

Mas que respuesta tengo algunas preguntas

1- Y el CSS para la clase "texto" donde esta?... Tambien seria bueno ver las propiedades de #asd
2- Estas seguro que el codigo fuente generado en PHP es exactamente igual al que te funciona correctamente fuera de PHP?

Si tienes espacios normales no debiera haber problemas. Si tienes espacios con &nbsp; entonces por ahi esta la cosa: nbsp = Non Breaking SPace = Espacio que no forza saltos de linea.

$texto tiene:
Código html:
Ver original
  1. <div id="asd">
  2.         <div class="basico"></div>
  3.         <h3>B&aacute;sico</h3>
  4.         <p class="texto">blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla.</p>
  5.         <p class="texto">blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla.</p>
  6. </div>
  7. <div>

No creo que sea el problema, pero igual sobra un cierre de div. Supongo que por eso es importante mostrar el codigo real y lo mas completo posible, sirve para ahorrar tiempo.
__________________
- León, Guanajuato
- GV-Foto
  #7 (permalink)  
Antiguo 21/05/2009, 10:47
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 11 años, 6 meses
Puntos: 2122
Respuesta: Texto desborda div

Tema trasladado desde PHP
  #8 (permalink)  
Antiguo 21/05/2009, 11:42
 
Fecha de Ingreso: diciembre-2007
Mensajes: 194
Antigüedad: 10 años
Puntos: 5
Respuesta: Texto desborda div

Cita:
Iniciado por GatorV Ver Mensaje
Tema trasladado desde PHP
No es un tema de CSS en serio, no lo es, es del PHP...
  #9 (permalink)  
Antiguo 21/05/2009, 11:53
 
Fecha de Ingreso: diciembre-2007
Mensajes: 194
Antigüedad: 10 años
Puntos: 5
Respuesta: Texto desborda div

Cita:
Iniciado por Triby Ver Mensaje
Mas que respuesta tengo algunas preguntas

1- Y el CSS para la clase "texto" donde esta?... Tambien seria bueno ver las propiedades de #asd
2- Estas seguro que el codigo fuente generado en PHP es exactamente igual al que te funciona correctamente fuera de PHP?

Si tienes espacios normales no debiera haber problemas. Si tienes espacios con &nbsp; entonces por ahi esta la cosa: nbsp = Non Breaking SPace = Espacio que no forza saltos de linea.

$texto tiene:
Código html:
Ver original
  1. <div id="asd">
  2.         <div class="basico"></div>
  3.         <h3>B&aacute;sico</h3>
  4.         <p class="texto">blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla.</p>
  5.         <p class="texto">blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla.</p>
  6. </div>
  7. <div>

No creo que sea el problema, pero igual sobra un cierre de div. Supongo que por eso es importante mostrar el codigo real y lo mas completo posible, sirve para ahorrar tiempo.
Hola de nuevo, pues te cuento que el codigo es exacamente el mismo, el del echo de PHP es un copiar pegar del codigo que antes estaba puesto tal cual.

El div lo he eliminado y no soluciona el problema.

Código html:
Ver original
  1. <div id="principal" style="overflow: hidden; opacity: 1; display: block;">
  2. <div id="contenido">
  3. <div id="thumbs">
  4. <div class="basico"/>
  5. <h3>Paquete</h3>
  6. <p class="texto">blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla.</p>
  7. <p class="texto">blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla.</p>
  8. </div>
  9. </div>
  10. </div>
  11. </div>

Respecto a los CSS que les afecta. son unos cuantos, ya que el div pertenece a un "scrollable":

Código css:
Ver original
  1. #cuerpo #principal{
  2.   background-color: transparent;
  3.   width: 578px;
  4.   height: 342px;
  5.   float: left;
  6.   overflow: hidden;
  7.   text-align: left;
  8. }
  9.  
  10. #cuerpo #principal .texto{
  11.   font-family: Verdana, Arial;
  12.   font-size: 12px;
  13.   text-decoration: none;
  14.   text-align: justify;
  15.   margin: 5px 5px 18px 5px;
  16. }
  17.  
  18. #cuerpo #principal .texto:hover{
  19.   color: #FFFFFF;
  20.   cursor: default;
  21. }
  22.  
  23. #cuerpo #principal .basico{
  24.   float: left;
  25.   margin-left: 50px;
  26.   background: url(../imagenes/paquetes.png) 0px 1px no-repeat;
  27.   width: 90px;
  28.   height: 110px;
  29. }
  30.  
  31. #cuerpo #principal .basico:hover{
  32.   background: url(../imagenes/paquetes.png) 2px -110px no-repeat;
  33.   cursor: pointer;
  34. }
  35.  
  36. #cuerpo #principal #thumbs .basico{
  37.   margin: 5px;
  38. }

Código css:
Ver original
  1. div.scrollable {
  2.     position:relative;
  3.     overflow:hidden;
  4.     width: 500px;
  5.     height:300px;
  6.     float:left;
  7. }
  8.  
  9. #thumbs {
  10.     position:absolute;
  11.     width:20000em;
  12.     clear:both;
  13.     border:0px;
  14. }
  15.  
  16. #thumbs div {
  17.     float:left;
  18.     width:500px;
  19.     height:300px;
  20.     background: transparent;
  21.     color:#fff;
  22.     border:0px;
  23.     cursor:pointer;
  24. }
  25.  
  26. #thumbs div.hover {
  27.     background-color: transparent;
  28. }
  29.  
  30. #thumbs div.active {
  31.     background-color: transparent;
  32.     cursor:default;
  33. }
  34.  
  35. #thumbs h3, #thumbs p, #thumbs span {
  36.     margin:13px;
  37.     font-family:"bitstream vera sans";
  38.     font-size:13px;
  39.     color:#fff;
  40. }
  41.  
  42. #thumbs h3 em {
  43.     font-style:normal;
  44.     color:yellow;
  45. }
  46.  
  47. a.prev, a.next, a.prevPage, a.nextPage {
  48.     display:block;
  49.     width:18px;
  50.     height:18px;
  51.     background:url(left.png) no-repeat;
  52.     float:left;
  53.     margin:140px 10px;
  54.     cursor:pointer;
  55. }
  56.  
  57. a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {
  58.     background-position:0px -18px;
  59. }
  60.  
  61. a.disabled {
  62.     visibility:hidden !important;
  63. }
  64.  
  65. a.next, a.nextPage {
  66.     background-image:url(right.png);
  67.     clear:right;
  68. }
  69.  
  70. div.navi {
  71.     margin-left:245px;
  72.     width:200px;
  73.     height:20px;
  74. }
  75.  
  76. div.navi a {
  77.     width:8px;
  78.     height:8px;
  79.     float:left;
  80.     margin:3px;
  81.     background:url(navigator.png) 0 0 no-repeat;
  82.     cursor:pointer;
  83. }
  84.  
  85. div.navi a:hover {
  86.     background-position:0 -8px;
  87. }
  88.  
  89. div.navi a.active {
  90.     background-position:0 -16px;
  91. }


PD SOLUCIONADO.

Perdon por no confiar en vosotros, efectivamente era el css, la clase thumbs del scrollable sobraba.... MIL GRACIAS Y DISCULPAS.

Última edición por MiLLeN; 21/05/2009 a las 12:00
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:05.