2

Tengo la mayor parte del código resuelto, pero no puedo con un simple problema, y es que los párrafos que son creados luego con una función llamada por sockets, si son demasiado largos, en vez de tener el comportamiento normal (y bajar una linea si no caben), no lo hacen!, simplemente siguen derecho y traspasan todos los elementos que estan fuera de el...

No entiendo por que pasa y ya me ha pasado en otros proyectos... ojala puedan ayudarme a solucionarlo...

Ya intente colocarle un height al contenedor que contiene a los parrafos (pero no funcionó), intente establecer display block a todos los elementos

, pero tampoco funcionó, le intente establecer un display block al elemento padre pero tampoco funcionó...

este es el codigo:

//HTML Web sockets

<div class="chat" id = "chat">

    <h1 class = "titulo">Web sockets!</h1>
    <div class="espacioMensajes" id = "espacioMensajes">

        <div class="mensajes" id = "mensajes"></div>

    </div>

    <div class="contenedorCampos">

        <input type="text" placeholder="nombre" id = "nombre" class = "campos"/>
        <input type="text" placeholder="escriba el mensaje aquí" id = "mensaje" class = "campos"/>

        <input type = "button" class = "enviarMensaje" id = "enviarMensaje" value = "enviar"/>

    </div>

</div>

//JS window.onload = ()=>{

let socket = io.connect("http://localhost:8080/");
let msgs;

let espacioMensajes = document.getElementById("espacioMensajes");
let output = document.getElementById("mensajes"); 
let nombre = document.getElementById("nombre");
let mensaje = document.getElementById("mensaje");
let enviar = document.getElementById("enviarMensaje");

enviar.addEventListener("click", ()=>{

    socket.emit("sendMsg",{

        nombre:nombre.value,
        mensaje:mensaje.value

    });

});



socket.on("sendMsg",data =>{

    if(data.mensaje.trim() != "" && data.nombre.trim() != "" && (output.offsetHeight < espacioMensajes.offsetHeight)){

        output.innerHTML += "<p><strong>" + data.nombre + ":</strong>" + data.mensaje + "</p>";
        mensaje.focus();

    }else{

        if(data.mensaje.trim() != "" && data.nombre.trim() != ""){

            msgs = document.getElementsByClassName("parrafo");

            for(let i = msgs.length-1; i >= 0; i--){

                output.removeChild(msgs[i]);

            }

        }


    }

});

}

//CSS

*{

    margin:0;
    padding:0;
    box-sizing: border-box;

}

body{

    background-color:#E1E0E1;

}

.titulo{

    text-align: center;

}

.chat{

    background-color:#ffffff;
    margin:auto;
    display:block;
    width: 40%;
    height: 750px;
    padding: 30px;

}

.espacioMensajes{

    height: 450px;
    width: 100%;
    border:2px solid #AAAAAA;
    border-radius: 15px;
    margin:auto;

}

.campos{
    display:block;
    transition: 1s ease;
    margin-top: 20px;
    padding:5px;
    border-bottom-left-radius: 7px;
    border-top-left-radius: 7px;
    border-bottom-right-radius: 7px;
    border-top-right-radius: 7px;
    border:2px solid #bbbbbb;

}

.campos:hover{
    transition: 1s ease;
    border:2px solid #40BFDB;

}

.mensajes{

    width: 100%;
    padding: 20px;
    font-family: "Lucida Console";
    font-size:15px;
    display: block;

}

.contenedorCampos{

    width:100%;
    height: 80px;

}

.enviarMensaje{
    margin: auto;
    transition: 1s ease;
    padding:20px;
    font-size: 22px;
    font-family: "Lucida Console";
    background-color:#000000;
    color:#ffffff;
    display:block;
    margin-top: 20px;

}

.enviarMensaje:hover{

    transition: 1s ease;
    background-color:red;
    cursor:pointer;

}


@media screen and (max-width: 1000px){

    .chat{

        width:60%;

    }

}

@media screen and (max-width: 800px){

    .chat{

        width:100%;

    }

}
3
  • prueba agregandole este css al elemento html que lo contiene al párrafo por ejemplo word-break: break-word;
    – user75901
    el 12 ene. 2019 a las 3:00
  • Me ha funcionado!, perfecto!, así que esa es la propiedad que hace que los párrafos se comporten así... ¡Muchas gracias!
    – Layer
    el 12 ene. 2019 a las 3:06
  • vale, no te preocupes ;3
    – Layer
    el 12 ene. 2019 a las 3:07

1 respuesta 1

3

Ocupa la propiedad en CSS que se llama break-word que romperá una cadena de texto en múltiples renglones para que no rebasen el ancho de su contenedor principal, su sintaxis es así

word-break: break-word;

Entonces a tu contenedor padre que tiene al texto le puedes aplicar es propiedad así

p{
      word-break: break-word;
    }

Mira este ejemplo mostrando el texto desbordado

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
      <style>
        p{
          background-color: red;
          width: 300px;
          
        }
      </style>
    </head>
    <body>
      <p>
      By myself lonk lonk lonk lonk the crimation crimationcrimationcrimationcrimationcrimationcrimationcrimationcrimationcrimationrmation.
    </p>
    </body>
    </html>

Ahora mira el mismo ejemplo funcional con la propiedad aplicada para evitar el desbordamiento

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    p{
      background-color: red;
      width: 300px;
      word-break: break-word;
    }
  </style>
</head>
<body>
  <p>
  By myself lonk lonk lonk lonk the crimation crimationcrimationcrimationcrimationcrimationcrimationcrimationcrimationcrimationrmation.
</p>
</body>
</html>

2
  • 1
    Ya valide la respuesta, excelente trabajo con el ejemplo y todo, gracias por tomarte ese tiempo!, espero que te hayan llegado los puntos ;3
    – Layer
    el 12 ene. 2019 a las 3:17
  • si, un gusto apoyarte @Riven saludos
    – user75901
    el 12 ene. 2019 a las 3:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.