Tenga un código que el usuario ingrese Correo electrónico, el correo electrónico se almacena en Variable y lo llamo más tarde en un contenedor. El problema es que si el correo es más largo se desborda el contenedor. ¿Cómo puedo dividirlo, por ejemplo, correo: " JohnDeer@gmail.com ", JohnDeer para ir en la primera línea y @gmail.com para ir en la segunda línea? ¿Cuál será la mejor manera de hacerlo, dividirlo o limitar los personajes?

Ejemplo

 <div class="main"> <div id="main1"> <input class="user-input" id="input-id" placeholder="Email" onblur="main0(this)"> <div class="btn0" id="btn0id" onclick="main0()">Show Email</div> </div> <div id="main2"> <span id="name"></span> </div> </div>

CSS

 .main{ text-align: center; background: black; width: 90%; max-width:25em; justify-content: center; align-items: center; border-radius: 1.5em; border-color: white; border-style: solid; border-width: 0.1em; box-shadow: 0 0 1em white; box-sizing: border-box; position: absolute; z-index: 10; } body{ color:white; }

JS

 function main0(emailField){ var name=document.getElementById("input-id").value; var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; if (reg.test(emailField.value) == false) { document.getElementById("input-id").style.borderBottom = "0.2em solid darkred"; setTimeout(function (){ document.getElementById("input-id").style.removeProperty("borderBottom"); },500); } else { setTimeout(function () { document.getElementById("main1").style.display = "none"; setTimeout(function () { document.getElementById("main2").style.display = "block"; document.getElementById("name").innerHTML = name; }, 100); }, 100); } }

Y por alguna razón, no sé por qué removeProperty no elimina el borde después de unos segundos.

Editar: también noté que si obtiene el formato de correo electrónico correcto, si hace clic en cualquier lugar de la pantalla, irá al correo electrónico de visualización sin hacer clic en el botón. ¿Cómo puedo arreglar eso?