안녕하세요 node.js로 실시간채팅을 구현하다가 질문이 있어서 질문드립니다.

먼저 html을 다음과 같이 구성을 했구요.

<div id="chat">
<div style = "width:270px; height:400px; border:solid 10px;" id="txtarea">
<dl id = "show_con">
</dl>
</div>
<input type="text" style="width:255px;" id="txt"/><input type="button" value="Enter" id="btn"/>

다음과 같이 script를 꾸며서 dl화면에 채팅값을 뿌려주게 구성했습니다.

$('#btn').click(function(){
var message = {
msg: $('#txt').val(),
user: $('#room').val()
    };
socket.emit('message', message);
});
socket.on('message', function(data){
$('#show_con').append('<dd style="margin:2px; text-align: right">'+ data +' : <br/>' + data.msg + '</dd>');
$('#txt').val('');
});

html보시면 뿌려지는 곳이 dl로 되어있는데요. 처음엔 몰랐는데 채팅을 계속 쳐보니 글이 아래 사진처럼

테두리를 벗어나더라구요.