Как разбить сообщения на строки?

Question

[amagon]

Добрый день. Нашёл в сети пример чата на сокетах, чат работает но если сообщение слишком длинное и выходит за пределы чата оно обрезается, подскажите что нужно исправить что бы длинные сообщения разбивались на строки?

// /project_dir/index.html
$(document).ready(function () {
        var socket = io.connect('http://localhost:8008');
        var name = 'Пётр_' + (Math.round(Math.random() * 10000));
        var messages = $("#messages");
        var message_txt = $("#message_text")
        $('.chat .nick').text(name);
 
        function msg(nick, message) {
            var m = '<div class="msg">' +
                    '<span class="user">' + safe(nick) + ':</span> '
                    + safe(message) +
                    '</div>';
            messages
                    .append(m)
                    .scrollTop(messages[0].scrollHeight);
        }
 
        function msg_system(message) {
            var m = '<div class="msg system">' + safe(message) + '</div>';
            messages
                    .append(m)
                    .scrollTop(messages[0].scrollHeight);
        }
 
        socket.on('connecting', function () {
            msg_system('Соединение...');
        });
 
        socket.on('connect', function () {
            msg_system('Соединение установлено!');
        });
 
        socket.on('message', function (data) {
            msg(data.name, data.message);
            message_txt.focus();
        });
 
        $("#message_btn").click(function () {
            var text = $("#message_text").val();
            if (text.length <= 0)
                return;
            message_txt.val("");
            socket.emit("message", {message: text, name: name});
        });
 
        function safe(str) {
            return str.replace(/&/g, '&amp;')
               .replace(/</g, '&lt;')
               .replace(/>/g, '&gt;');
        }
    });

// /project_dir/main.css
.demo {
    width: 600px;
    margin: 20px auto;
    padding: 10px;
    color: #4F6B72;
    font-family: "PT Sans", Verdana, Arial, sans-serif;
    font-size: 13px;
}
 
.chat .messages{
    height: 300px;
    border: 1px solid #d4d4d4;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 5px;
}
 
.chat .messages .user{
    color: #B22222;
}
 
.chat .message{
    width: 70%;
}
 
.chat .panel{
    margin-top: 8px;
}
 
#message_text{
    width: 60%;
    display: inline-block;
    margin-left: 8px;
}

Comments

[tomatho]

а не проще у элемента указать word-wrap / word-break ? :\

[Kovalsky]

tomatho: поправить стили это даже не "проще", а это единственный вариант, т.к. на сервере не получится надёжно рассчитать допустимую длину строки.

[amagon]

Да действительно всё решилось простым добавлением word-break: break-all; в css, всем спасибо.

Answer 1

[Алексей]

Как вариант: нужно посмотреть что получается на выходе и подшаманить со стилями(через chromeDevTools), чтобы не мудрить с переносами.
https://webref.ru/css/word-break