Question

如果输入的消息太长，则它与聊天应用程序中的以下文本区域重叠

如何解决这个问题。我也附上图片以解决问题。

的index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <title>MongoChat</title>
    <style>
        #messages{height:300px;}
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6 offset-md-3 col-sm-12">
            <h1 class="text-center">
                MongoChat
                <button id="clear" class="btn btn-danger">Clear</button>
            </h1>
            <div id="status"></div>
            <div id="chat">
                <input type="text" id="username" class="form-control" placeholder="Enter name...">
                <br>
                <div class="card">
                    <textarea id="messages" class="well card-block">

                    </textarea>
                </div>
                <br>
                <textarea id="textarea" class="form-control" placeholder="Enter message..."></textarea>
            </div>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>

<script>
    (function(){
        var element = function(id){
            return document.getElementById(id);
        }

        // Get Elements
        var status = element('status');
        var messages = element('messages');
        var textarea = element('textarea');
        var username = element('username');
        var clearBtn = element('clear');

        // Set default status
        var statusDefault = status.textContent;

        var setStatus = function(s){
            // Set status
            status.textContent = s;

            if(s !== statusDefault){
                var delay = setTimeout(function(){
                    setStatus(statusDefault);
                }, 4000);
            }
        }

        // Connect to socket.io
        var socket = io.connect('http://127.0.0.1:4000');

        // Check for connection
        if(socket !== undefined){
            console.log('Connected to socket...');

            // Handle Output
            socket.on('output', function(data){
                //console.log(data);
                if(data.length){
                    for(var x = 0;x < data.length;x++){
                        // Build out message div
                        var message = document.createElement('div');
                        message.setAttribute('class', 'chat-message');
                        message.textContent = data[x].name+": "+data[x].message;
                        messages.appendChild(message);
                        messages.insertBefore(message, messages.firstChild);
                    }
                }
            });

            // Get Status From Server
            socket.on('status', function(data){
                // get message status
                setStatus((typeof data === 'object')? data.message : data);

                // If status is clear, clear text
                if(data.clear){
                    textarea.value = '';
                }
            });

            // Handle Input
            textarea.addEventListener('keydown', function(event){
                if(event.which === 13 && event.shiftKey == false){
                    // Emit to server input
                    socket.emit('input', {
                        name:username.value,
                        message:textarea.value
                    });

                    event.preventDefault();
                }
            })

            // Handle Chat Clear
            clearBtn.addEventListener('click', function(){
                socket.emit('clear');
            });

            // Clear Message
            socket.on('cleared', function(){
                messages.textContent = '';
            });
        }

    })();
</script>
</body>
</html>

server.js

var mongo = require('mongodb').MongoClient;
var client = require('socket.io').listen(4000).sockets;

// Connect to mongo
mongo.connect('mongodb://127.0.0.1/mongochat', function(err, db){
    if(err){
        throw err;
    }

    console.log('MongoDB connected...');

    // Connect to Socket.io
    client.on('connection', function(socket){
        var chat = db.collection('chats');

        // Create function to send status
        sendStatus = function(s){
            socket.emit('status', s);
        }

        // Get chats from mongo collection
        chat.find().limit(100).sort({_id:1}).toArray(function(err, res){
            if(err){
                throw err;
            }

            // Emit the messages
            socket.emit('output', res);
        });

        // Handle input events
        socket.on('input', function(data){
            var name = data.name;
            var message = data.message;

            // Check for name and message
            if(name == '' || message == ''){
                // Send error status
                sendStatus('Please enter a name and message');
            } else {
                // Insert message
                chat.insert({name: name, message: message}, function(){
                    client.emit('output', [data]);

                    // Send status object
                    sendStatus({
                        message: 'Message sent',
                        clear: true
                    });
                });
            }
        });

        // Handle clear
        socket.on('clear', function(data){
            // Remove all chats from collection
            chat.remove({}, function(){
                // Emit cleared
                socket.emit('cleared');
            });
        });
    });
});

First look of my application

Now, I have entered the name and message

Now , message is displayed as i want( working correctly)

If i eneter a too long message then i overlaps the below textatarea

Answer 1

只需设置 myClass: { '& svg': { fontSize: '5em' } }高度为auto和.card进行滚动

overflow: auto;

.card{
height:auto;
overflow: auto;

}

Answer 2

你的问题是身高。您为NSMutableAttributedString指定了固定的height为messages

最好更改此选项以添加300px，而不是在textarea中添加文本或将divs设为height，但如果超出页面高度，则必须处理滚动条。

auto

如果你想保持高度<style> #messages{height:auto;} </style>，你也可以添加300px

overflow指定如果内容溢出您的案例中的高度会发生什么。

overflow

如何停止文本重叠文本区域

2 个答案: