Have a code that user enters Email, the email gets stored in Variable and i call it later in a container. The problem is that if the email is longer it overflows through the container. How can i split it for example mail: " JohnDeer@gmail.com ", the JohnDeer to go on the first line and @gmail.com to go on the second line? What will be the best way to do it, to split it or to limit the characters?

Example

<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);
}
}

And for some reason idk why the removeProperty does not remove the border after seconds.

Edit: Also noticed that if you get the email format right, if you click anywhere on the screen it will go to the show email without clicking on the button. How can i fix that?