white-space: pre-line； 导致页面显示空行的问题解决

css white-space

txt文段中带有空行为什么翻译到html中文段会带有<span style="text-wrap-mode: nowrap;">

<template> <div> <span style="display: flex; justify-content: center; margin-bottom: 8px"> <img alt="Vue logo" src="../assets/logo.png" style="width: 90px;"> </span> <span style="display: flex; justify-content: center; margin-bottom: 8px"> 当前登录用户： <input v-model="userId" placeholder="请输入p13" @keyup.enter="connectWebSocket" > <button @click="connectWebSocket" style="margin-left: 10px; ">登录</button> </span> <span style="display: flex; justify-content: center"> <input v-model="currentCommand" style="width: 600px" placeholder="输入任意命令（如：ipconfig / dir）" @keyup.enter="sendCommand" > <button @click="sendCommand" style="margin-left: 10px; ">执行命令</button> <button @click="abortCommand" style="margin-left: 10px; background: #ff4d4f" > 中止命令 </button> </span> <div style="display: flex"> <div style="margin-top: 20px; width: 30%;"> <h3 style="text-align: center">已执行命令</h3> <div style="height: 482px; overflow-y: auto; background: #f8f8f8;" > <div v-for="(msg, index) in messages" :key="index" style="margin-top: 8px; margin-left: 8px; border-radius: 4px; overflow-y: auto;" > {{ msg }} </div> </div> </div> <div style="padding: 20px; width: 70%"> <h3 style="text-align: center">实时命令输出</h3> <pre ref="outputPre" style="background: #282c34; color: #fff; padding: 15px; border-radius: 4px; height: 450px; overflow-y: auto" > {{ currentOutput }} </pre> </div> </div> </div> </template> <script> import websocket from '@/utils/websocket' export default { name: 'HelloWorld', props: { msg: String }, data() { return { currentCommand: '', messages: [], currentOutput: '', stompClient: null, index: 1, userId: '' // 改为从登录信息获取 }; }, // mounted() { // this.connectWebSocket(); // 页面加载时连接 WebSocket // }, methods: { async connectWebSocket() { alert("登录成功"); try { this.stompClient = await websocket.connect(this.userId); // 订阅命令输出通道 const subscription = this.stompClient.subscribe(`/topic/commandOutput/${this.userId}`, (message) => { const output = message.body; if (output.startsWith("⏹")) { this.currentOutput = ''; this.messages.push(output); return; } console.log(this.currentOutput) this.currentOutput += output.trim() + '\n'; this.$nextTick(() => { if (this.$refs.outputPre) { this.$refs.outputPre.scrollTop = this.$refs.outputPre.scrollHeight; } }); }); // 在断开连接时取消订阅 this.stompClient.onDisconnect = () => { subscription.unsubscribe(); }; } catch (error) { console.error('WebSocket连接失败:', error); } }, sendCommand() { if (this.userId === '') { alert("请输入当前登录用户"); return; } if (this.currentCommand.trim() && this.stompClient) { // 删除 currentOutput 的最后一个非空行 if (this.currentOutput) { let lastNewLineIndex = this.currentOutput.lastIndexOf('\n'); let lastNonEmptyIndex = -1; // 从后往前遍历，找到最后一个非空行的起始位置 for (let i = this.currentOutput.length - 1; i >= 0; i--) { if (this.currentOutput[i] === '\n') { // 如果当前字符是换行符，并且之前的字符不是空白字符，则记录位置 if (lastNewLineIndex !== -1 && i < lastNewLineIndex) { lastNonEmptyIndex = lastNewLineIndex; break; } lastNewLineIndex = i; } else if (this.currentOutput[i].trim() !== '') { // 找到非空字符，更新 lastNewLineIndex lastNewLineIndex = i; } } // 如果找到了非空行，则删除它 if (lastNonEmptyIndex !== -1) { const nextNewLineIndex = this.currentOutput.indexOf('\n', lastNonEmptyIndex); if (nextNewLineIndex === -1) { this.currentOutput = this.currentOutput.substring(0, lastNonEmptyIndex); } else { this.currentOutput = this.currentOutput.substring(0, lastNonEmptyIndex) + this.currentOutput.substring(nextNewLineIndex); } } // 删除最后一个空行 if (this.currentOutput.endsWith('\n')) { this.currentOutput = this.currentOutput.substring(0, this.currentOutput.length - 1); } } // 发送命令 this.stompClient.publish({ destination: '/app/executeCommand', body: JSON.stringify({ command: this.currentCommand.trim(), //todo 之后改为动态 executeHost: '10.228.73.15', userId: this.userId }), }); this.messages.push(this.index + '. ' + this.currentCommand); this.index += 1; this.currentCommand = ''; } }, abortCommand() { if (this.stompClient) { this.stompClient.publish({ destination: '/app/abortCommand', body: JSON.stringify({ // 改为JSON格式 command: "ABORT", userId: this.userId }) }); this.messages.push("已发送中止命令"); } }, onTabChange(key, type) { this[type] = key; }, }, beforeDestroy() { if (this.stompClient) { this.stompClient.deactivate(); } } } </script> <style scoped> pre { white-space: pre-line; /* 合并连续的空格，但保留换行符 */ background-color: #f4f4f4; padding: 10px; border: 1px solid #ddd; } </style> 你的后端修改非常正确，帮我的前端也一样修改下

POST /v1/chat/completions HTTP/1.1 Host: api.deepseek.com Authorization: Bearer YOUR_API_KEY Content-Type: application/json Content-Length: 85 {"model":"deepseek-chat","messages":[{"role":"user","content":"你好，你是谁？"}]}把这一段改成html格式的文本请求