实现详细页面公告自动换行

pages/announcementList/announcementDetail.vue

@@ -6,7 +6,7 @@
         <text class="time">{{ announcementDetail.createTime }}</text>
       </view>
     </view>
-    
+
     <view class="content">
       <rich-text :nodes="announcementDetail.content" class="rich-content"></rich-text>
     </view>
@@ -20,7 +20,7 @@ const announcementDetail = ref({
   id: '',
   title: '',
   content: '',
-  createTime: ''
+  createTime: '',
 })
 
 // 获取页面参数
@@ -28,12 +28,12 @@ const getPageParams = () => {
   const pages = getCurrentPages()
   const currentPage = pages[pages.length - 1]
   const options = currentPage.options
-  
+
   announcementDetail.value = {
     id: options.id || '',
     title: decodeURIComponent(options.title || ''),
     content: decodeURIComponent(options.content || ''),
-    createTime: decodeURIComponent(options.createTime || '')
+    createTime: decodeURIComponent(options.createTime || ''),
   }
 }
 
@@ -63,6 +63,7 @@ onMounted(() => {
   color: #333;
   line-height: 1.4;
   margin-bottom: 20rpx;
+  word-break: break-all; /* 强制换行（包括长单词） */
 }
 
 .meta {
@@ -87,33 +88,33 @@ onMounted(() => {
   font-size: 28rpx;
   line-height: 1.8;
   color: #333;
-  
+
   :deep(img) {
     max-width: 100%;
     height: auto;
     border-radius: 8rpx;
     margin: 20rpx 0;
   }
-  
+
   :deep(p) {
     margin-bottom: 20rpx;
   }
-  
+
   :deep(h1, h2, h3, h4, h5, h6) {
     font-weight: bold;
     margin: 30rpx 0 20rpx 0;
     color: #333;
   }
-  
+
   :deep(ul, ol) {
     padding-left: 40rpx;
     margin-bottom: 20rpx;
   }
-  
+
   :deep(li) {
     margin-bottom: 10rpx;
   }
-  
+
   :deep(blockquote) {
     border-left: 8rpx solid #007aff;
     padding-left: 20rpx;
@@ -121,14 +122,14 @@ onMounted(() => {
     color: #666;
     font-style: italic;
   }
-  
+
   :deep(code) {
     background-color: #f0f0f0;
     padding: 4rpx 8rpx;
     border-radius: 4rpx;
     font-family: 'Courier New', monospace;
   }
-  
+
   :deep(pre) {
     background-color: #f0f0f0;
     padding: 20rpx;
@@ -136,19 +137,19 @@ onMounted(() => {
     overflow-x: auto;
     margin: 20rpx 0;
   }
-  
+
   :deep(table) {
     width: 100%;
     border-collapse: collapse;
     margin: 20rpx 0;
   }
-  
+
   :deep(th, td) {
     border: 1rpx solid #ddd;
     padding: 16rpx;
     text-align: left;
   }
-  
+
   :deep(th) {
     background-color: #f8f8f8;
     font-weight: bold;