javascript - 用 HTML 编写聊天室的一些错误

Question

https://jsfiddle.net/LiNNN/96edrLno/ <<这是我的 fiddle

我错了，但我不知道错在哪里
我想像这样设计聊天室的布局 >> enter image description here
有人在这里聊天，如果用户在聊天 block 中输入大量文本，排版将覆盖我的聊天区域
原则上聊天区会随着聊天 block 展开
但它没有，我不知道为什么 -> 这是第一季度

当用户向聊天提交一条很长的消息时，该消息会超出聊天 block ，并且似乎不会在每两条消息之间换行。

如何达到这个目的？我不知道我的 CSS 哪里出错了

function runScript(e) {
                if (e.keyCode == 13) {
                    var chatDiv = document.getElementById("Chat");
                    var input = document.getElementById("inputText");
                    chatDiv.innerHTML = chatDiv.innerHTML + "<span class=\"myWord\">" + input.value + "</span><br /><br /><br/>";
                    input.value = "";
                }

            }

#Chat {
        border-radius: 45px;
        margin:20px;
        padding:20px;
        border:solid;
        border-width:1px;
        background-color:#bbb9b9;
        font-weight: bold;
    }

    div.othersText {
        max-width:80%;
        padding:20px;
        margin-top:25px;
        margin-bottom:25px;
        }
    div.myText {
        max-width:80%;
        padding:20px;

        text-align:right;
        margin-top:25px;
        margin-bottom:25px;
        }

    span.myWord{
        border-radius: 45px;
        border:solid;
        border-width:1px;
        background-color:#E9EBEE;
        padding:15px;
        color:#ab0af1;
        max-width:80%;
        float:right;
        clear:both;
    }

    span.othersWord{
        float:left;
        clear:both;
        border-radius: 45px;
        border:solid;
        border-width:1px;
        background-color:#E9EBEE;
        padding:15px;
        max-width:80%;
        color:#3B5998;
    }
    #textInput{
        text-align: center;
    }

    #textInput input{
        width: 90%;
        height: 40px;
        text-align: center;
        font-size: 16px;
    }

<div id="Chat">
                <div class="othersText"><span class="othersWord">Johnny:The air quality in this city is horrendous! The pollution levels were so high that we all need to wear a face mask when we go outside. </span></div>
                <div class="myText"><span class="myWord">Exhaust fumes from vehicles cause a great deal of damage to the environment.</span></div>
                <div class="othersText"><span class="othersWord">Johnny:On top of that, there are a few large chemical factories in the suburbs, which are contributing to the high pollution levels in the water and the air in this city.</span></div>
                <div class="myText"><span class="myWord">As much as I love this city, I think I'm going to have to find a greener city to live in. Living in a polluted city like this just can't be good for my health. </span></div>
                <div class="othersText"><span class="othersWord"> Johnny:I know what you mean. However, there are so few places left that have not been affected by global warming. If it's not the pollution, then it's the natural disasters, deforestation, or the greenhouse effect. </span></div>
                <div class="myText"><span class="myWord"> What is the greenhouse effect exactly?  </span></div>
                <div class="othersText"><span class="othersWord">Johnny:It's the gradual rise in the earth's temperature. </span></div>
            </div>

Answer 1

我不确定这是否是您要查找的内容，但请尝试添加 overflow: hidden;到您的#Chat 元素。