聊天框文本转义<div>
[英]Chatbox text escapping <div>
问题描述
Right now i want to create a fake "chat" feature. 
现在，我想创建一个假的“聊天”功能。 problem now is that when i click "send" over and over again the text escapes the div. 现在的问题是，当我一遍又一遍地单击“发送”时，文本会退出div。 is there a way to make it so that when the text in the div is nearing the div border it will stop or make a scrolling feature. 有没有一种方法可以使它，使得当div中的文本接近div边框时，它将停止或具有滚动功能。 I only can use Html Javascript and CSS 我只能使用HTML Javascript和CSS
function postchat(){ var node =document.createElement("p"); var content= document.getElementById("comment").value; var comment= content; var textnode = document.createTextNode(comment); node.appendChild(textnode); document.getElementById("allComment").appendChild(node); }
#chatbox { width:50%; text-align:left; background-color:#F7F7F7; height:250px; border:1px solid black; }
<body> <div id="chatbox"> <div id="allComment" style="font-size:10px; line-height:90%;" ></div> </div> <p> <input type="text" id="comment"></input> </p> <input type="button" value="Send" onclick="postchat()" /> </body>
5 个解决方案
解决方案1
1 2015-07-17 14:21:05
Set overflow:auto 设置overflow:auto
function postchat(){ var node =document.createElement("p"); var content= document.getElementById("comment").value; var comment= content; var textnode = document.createTextNode(comment); node.appendChild(textnode); document.getElementById("allComment").appendChild(node); }
#chatbox { width:50%; text-align:left; background-color:#F7F7F7; height:250px; border:1px solid black; overflow: auto; }
<body> <div id="chatbox"> <div id="allComment" style="font-size:10px; line-height:90%;" ></div> </div> <p> <input type="text" id="comment"></input> </p> <input type="button" value="Send" onclick="postchat()" /> </body>
解决方案2
0 2015-07-17 14:22:09
you need overflow:auto this will not allow the p tag to overflow the container. 您需要overflow:auto这将不允许p标签溢出容器。
#chatbox {
width:50%;
text-align:left;
background-color:#F7F7F7;
height:250px;
border:1px solid black;
overflow: auto;
}
解决方案3
0 2015-07-17 14:22:58
Set overflow: auto; 设置overflow: auto; on your CSS for #chatbox , so when the text will be over the content of your div, the scroll bar will appear on your #chatbox . 在#chatbox的CSS上，因此当文本超出div的内容时，滚动条将出现在#chatbox 。
More info about overflow here . 有关溢出的更多信息，请参见此处 。
overflow: auto; will detect automatically overflow for X and Y . 将自动检测X和Y溢出。
function postchat(){ var node =document.createElement("p"); var content= document.getElementById("comment").value; var comment= content; var textnode = document.createTextNode(comment); node.appendChild(textnode); document.getElementById("allComment").appendChild(node); }
#chatbox { width:50%; text-align:left; background-color:#F7F7F7; height:250px; border:1px solid black; overflow: auto; }
<body> <div id="chatbox"> <div id="allComment" style="font-size:10px; line-height:90%;" ></div> </div> <p> <input type="text" id="comment"></input> </p> <input type="button" value="Send" onclick="postchat()" /> </body>
解决方案4
0 已采纳 2015-07-17 14:23:17
Here is how you make the scrollbars: overflow-y: scroll; 这是制作滚动条的方法： overflow-y: scroll; - see below. - 见下文。
I cant replicate the described behaviour on multiple clicks on send - could you elaborate? 我无法多次点击发送来复制所描述的行为-您能否详细说明？
function postchat(){ var node =document.createElement("p"); var content= document.getElementById("comment").value; var comment= content; var textnode = document.createTextNode(comment); node.appendChild(textnode); document.getElementById("allComment").appendChild(node); }
#chatbox { width:50%; text-align:left; background-color:#F7F7F7; height:250px; border:1px solid black; overflow-y: scroll; }
<body> <div id="chatbox"> <div id="allComment" style="font-size:10px; line-height:90%;" ></div> </div> <p> <input type="text" id="comment"></input> </p> <input type="button" value="Send" onclick="postchat()" /> </body>
解决方案5
0 2015-07-17 14:25:57
Using either overflow:auto or overflow-y:scroll should work for you. 使用overflow:auto或overflow-y:scroll应该适合您。
overflow: auto will scroll in all directions if necessary, while overflow-y: scroll will keep the scrolling to just the vertical (y) axis. overflow: auto将在所有方向上滚动，而overflow-y: scroll将保持滚动到垂直（y）轴。
#chatbox { width:50%; text-align:left; background-color:#F7F7F7; height:250px; border:1px solid black; overflow-y: scroll; /* overflow: auto */ }
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.