Texto desborda div

[MiLLeN]

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!.

[phidalgo]

prueba con nl2br($textoquetienesaltosdelinea)

[nicolyto77]

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

[Triby]

Si muestras un ejemplo del texto, el codigo CSS y el PHP (si lo hay) va a ser mas facil encontrar el problema.

[MiLLeN]

Iniciado por phidalgo

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;

Iniciado por Triby

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.

[Triby]

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:

<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>
 

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.

[GatorV]

Tema trasladado desde PHP

[MiLLeN]

Iniciado por GatorV

Tema trasladado desde PHP

No es un tema de CSS en serio, no lo es, es del PHP...

[MiLLeN]

Iniciado por Triby

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:

<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>
 

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:

<div id="principal" style="overflow: hidden; opacity: 1; display: block;">
<div id="contenido">
<div id="thumbs">
<div class="basico"/>
<h3>Paquete</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.</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>
</div>
</div>
 

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

Código css:

#cuerpo #principal{
  background-color: transparent;
  width: 578px;
  height: 342px;
  float: left;
  overflow: hidden;
  text-align: left;
}
 
#cuerpo #principal .texto{
  font-family: Verdana, Arial;
  font-size: 12px;
  text-decoration: none;
  text-align: justify;
  margin: 5px 5px 18px 5px;
}
 
#cuerpo #principal .texto:hover{
  color: #FFFFFF;
  cursor: default;
}
 
#cuerpo #principal .basico{
  float: left;
  margin-left: 50px;
  background: url(../imagenes/paquetes.png) 0px 1px no-repeat;
  width: 90px;
  height: 110px;
}
 
#cuerpo #principal .basico:hover{
  background: url(../imagenes/paquetes.png) 2px -110px no-repeat;
  cursor: pointer;
}
 
#cuerpo #principal #thumbs .basico{
  margin: 5px;
}
 

Código css:

div.scrollable {
    position:relative;
    overflow:hidden;
    width: 500px;
    height:300px;
    float:left;
}
 
#thumbs {
    position:absolute;
    width:20000em;
    clear:both;
    border:0px;
}
 
#thumbs div {
    float:left;
    width:500px;
    height:300px;
    background: transparent;
    color:#fff;
    border:0px;
    cursor:pointer;
}
 
#thumbs div.hover {
    background-color: transparent;
}
 
#thumbs div.active {
    background-color: transparent;
    cursor:default;
}
 
#thumbs h3, #thumbs p, #thumbs span {
    margin:13px;
    font-family:"bitstream vera sans";
    font-size:13px;
    color:#fff;
}
 
#thumbs h3 em {
    font-style:normal;
    color:yellow;
}
 
a.prev, a.next, a.prevPage, a.nextPage {
    display:block;
    width:18px;
    height:18px;
    background:url(left.png) no-repeat;
    float:left;
    margin:140px 10px;
    cursor:pointer;
}
 
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {
    background-position:0px -18px;
}
 
a.disabled {
    visibility:hidden !important;
}
 
a.next, a.nextPage {
    background-image:url(right.png);
    clear:right;
}
 
div.navi {
    margin-left:245px;
    width:200px;
    height:20px;
}
 
div.navi a {
    width:8px;
    height:8px;
    float:left;
    margin:3px;
    background:url(navigator.png) 0 0 no-repeat;
    cursor:pointer;
}
 
div.navi a:hover {
    background-position:0 -8px;
}
 
div.navi a.active {
    background-position:0 -16px;
}
 

PD SOLUCIONADO.

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