输入的电子邮件的文本溢出到容器外

Question

有一个代码，用户输入电子邮件，电子邮件被存储在变量，我调用它稍后在容器中。问题是，如果电子邮件较长，它会溢出容器。我如何分割它，例如邮件:"[e-mail] "， JohnDeer放在第一行，@gmail.com放在第二行?最好的方法是什么，是分割还是限制角色?

例子

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

不知道为什么removeProperty没有在几秒钟后移除边框。

编辑:还注意到，如果你得到电子邮件格式正确，如果你点击屏幕上的任何地方，它会去显示电子邮件，而无需点击按钮。我怎样才能解决这个问题呢?

Answer 1

修复了在CSS中添加的问题

overflow: hidden;
text-overflow: ellipsis;

这样，如果电子邮件比容器长，它会添加"…";并且不会显示邮件的其余部分。