I have most of the code solved, but I can't with a simple problem, which is that the paragraphs that are created later with a function called by sockets, if they are too long, instead of having the normal behavior (and go down a line if they don't fit), they don't!, they just go straight and pass all the elements that are outside of it...
I don't understand why it happens and it has already happened to me in other projects... I hope you can help me solve it...
I already tried to set a height to the container that contains the paragraphs (but it didn't work), try to set display block to all the elements
, but it didn't work either, I tried to set a display block to the parent element but it didn't work either...
this is the code:
//HTML Websockets
<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%;
}
}
It occupies the property in CSS that is called
break-word
that will break a text string into multiple lines so that they do not exceed the width of its main container, its syntax is like thisword-break: break-word;
So to your parent container that has the text you can apply it's property like this
Look at this example showing the overset text
Now look at the same working example with the property applied to prevent overflow