消息布局修改

src/components/MessageBox/index.vue

@@ -10,10 +10,10 @@
       <br />
       <el-scrollbar class="itemScrollbar">
         <div class="item" v-for="(item, index) in msgData" :key="index">
-          <div>
+          <div class="box">
             <div>{{ item.created }}</div>
             <div>{{ item.title }}</div>
-            <div>
+            <div class="wordWrap">
               {{ item.content }}
             </div>
           </div>
@@ -143,7 +143,13 @@ watch(value, () => {
     border-radius: 16px;
     justify-content: space-between;
     font-size: $f20;
-
+    .box {
+      width: calc(100% - 10px);
+    }
+    .box div {
+      width: 100%;
+      overflow-wrap: break-word;
+    }
     .operate {
       margin-left: 10px;
     }

src/components/RealTimeMsg/index.vue

@@ -197,11 +197,15 @@ onUnmounted(() => {
 
         .itemContent {
           height: 100%;
+          width: calc(100% - 60px - 20px);
           border-radius: 16px;
           padding: 20px;
           background-color: white;
           font-size: $f20;
         }
+        .itemContent div {
+          word-wrap: break-word; /* 或者使用 overflow-wrap: break-word; */
+        }
 
         .btns {
           width: 60px;