html - 当我向键盘发送垃圾邮件时，文本隐藏

Question

我在 div 内执行此操作，但是当我向键盘发送垃圾邮件时，文本突然隐藏在第二行，我知道这overflow:hidden不是导致它的原因。

为什么它会导致隐藏是否有任何替代解决方案？

顺便说一句，文字是contenteditable

这里是小提琴：http: //jsfiddle.net/xR9Xx/

Answer 1

选项1

将overflowfrom设置hidden为auto, 以获得以下样式。如果您正在寻找滚动条出现。

.profilestatus .statusTextBox {
    height: 100px;
    left: 60px;
    outline: medium none;
    overflow: auto;
    position: absolute;
    text-align: center;
    width: 400px;
}

选项：#2

将word-wrap和width属性添加到以下样式。

.profilestatus .statusTextBox .statusText {
    position:relative;
    font-family:Calibri, Arial;
    font-size:95%;
    top:20px;
    font-weight:400;
    word-wrap: break-word;
    width:400px;
}

演示

Answer 2

如果可以，而不是position:relative;成功float:left;

 .profilestatus .statusTextBox .statusText {
          float:left;
          text-align:center;
            font-family:Calibri,Arial;
            font-size:95%;
            font-weight:400;
        }

工作演示