From b1fb932aae39329c10a043c52dda023b45d92ec4 Mon Sep 17 00:00:00 2001
From: liangjiami <2249412933@qq.com>
Date: Thu, 17 Jul 2025 11:42:38 +0800
Subject: [PATCH] 1

---
 .../view/mobile/topic_nas/help_detail.html    | 80 ++++++++++++++-----
 public/static/index/mobile/css/public.css     | 28 ++++++-
 .../mobile/css/topic_nas_help-detail.css      |  5 +-
 3 files changed, 90 insertions(+), 23 deletions(-)

diff --git a/app/index/view/mobile/topic_nas/help_detail.html b/app/index/view/mobile/topic_nas/help_detail.html
index c99ac59e..8fbdbdaf 100644
--- a/app/index/view/mobile/topic_nas/help_detail.html
+++ b/app/index/view/mobile/topic_nas/help_detail.html
@@ -173,28 +173,68 @@
             }, 300);
         });
         // 英文单词截断
-        // 1. 基础CSS保证（必须）
-        $('.ql-editor').css({
-            'word-break': 'normal',
-            'overflow-wrap': 'anywhere',
-            'overflow-x': 'hidden'
-        });
-
-        // 2. 智能处理文本节点
-        $('.ql-editor').contents().each(function() {
-            if (this.nodeType === 3) { // 只处理文本节点
-            const $wrapper = $('<span>').addClass('word-wrapper');
-            $(this).replaceWith($wrapper.text(this.nodeValue));
-            }
-        });
-
-        // 3. 处理长单词（10个字符以上）
-        $('.word-wrapper').html(function(_, html) {
-            return html.replace(/([a-zA-Z]{10,})/g, function(match) {
-            return match.replace(/([a-z])([A-Z])/g, '$1<wbr>$2')
-                        .replace(/(.{5})/g, '$1<wbr>');
+        // 1. 基础处理函数
+        function processTextNodes($element) {
+            $element.contents().each(function() {
+                if (this.nodeType === 3) { // 文本节点
+                    const text = this.nodeValue.trim();
+                    if (text) {
+                        $(this).replaceWith(
+                            $('<span>').addClass('word-wrapper').text(text)
+                        );
+                    }
+                } else if (this.nodeType === 1 && !$(this).is('br, img, a')) { // 元素节点(非换行/图片/链接)
+                    processTextNodes($(this));
+                }
             });
+        }
+
+        // 2. 智能断词处理
+        function smartWordBreak(html) {
+            return html
+                // 处理超长单词(15字符以上)
+                .replace(/([a-zA-Z]{15,})/g, function(match) {
+                    return match
+                        .replace(/([a-z])([A-Z])/g, '$1<wbr>$2') // 驼峰分词
+                        .replace(/([_-])/g, '$1<wbr>')           // 连接符分词
+                        .replace(/(.{8})/g, '$1<wbr>');           // 每8字符分词
+                })
+                // 保护常见复合词
+                .replace(/(launch parameters|featured apps)/gi, function(match) {
+                    return match.replace(/\s/g, '<wbr> ');
+                });
+        }
+
+        // 3. 执行处理
+        const $editor = $('.ql-editor');
+        
+        // 先处理文本节点
+        processTextNodes($editor);
+        
+        // 再处理所有.word-wrapper
+        $('.word-wrapper').each(function() {
+            const $this = $(this);
+            $this.html(smartWordBreak($this.text()));
         });
+
+        // 4. 监听动态内容变化（适用于富文本编辑器）
+        if (typeof MutationObserver !== 'undefined') {
+            const observer = new MutationObserver(function(mutations) {
+                mutations.forEach(function(mutation) {
+                    $(mutation.addedNodes).each(function() {
+                        processTextNodes($(this));
+                        $('.word-wrapper', this).each(function() {
+                            $(this).html(smartWordBreak($(this).text()));
+                        });
+                    });
+                });
+            });
+            
+            observer.observe($editor[0], {
+                childList: true,
+                subtree: true
+            });
+        }
     });
 </script>
 {/block}
\ No newline at end of file
diff --git a/public/static/index/mobile/css/public.css b/public/static/index/mobile/css/public.css
index 0ac54041..f4f61eb6 100755
--- a/public/static/index/mobile/css/public.css
+++ b/public/static/index/mobile/css/public.css
@@ -155,7 +155,18 @@ body {
     tab-size: 4;
     -moz-tab-size: 4;
     text-align: left;
-    word-wrap: normal;
+     /* 换行控制 */
+    word-wrap: break-word;    /* 兼容旧浏览器 */
+    overflow-wrap: break-word; /* 现代浏览器标准 */
+    word-break: normal;       /* 保持单词完整 */
+    
+    /* 排版优化 */
+    white-space: normal;
+    hyphens: manual;         /* 禁用自动连字符 */
+    
+    /* 容器约束 */
+    max-width: 100%;
+    display: block;
     
 }
 .word-wrapper {
@@ -172,8 +183,21 @@ body {
     margin: 0;
     padding: 0;
     counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+    word-break: normal;
+    overflow-wrap: anywhere; /* 更智能的换行方式 */
+    display: inline-block;   /* 创建换行上下文 */
+    max-width: 100%;
+}
+/* 移动端优化 */
+@media (max-width: 768px) {
+    .narshelpCenterdetail-app .nhlp-app-content {
+        width: 95%;
+    }
+    .ql-editor p,
+    .ql-editor li {
+        display: block; /* 移动端改用块级布局 */
+    }
 }
-
 .ql-editor ol,.ql-editor ul {
     padding-left: 1.5em
 }
diff --git a/public/static/index/mobile/css/topic_nas_help-detail.css b/public/static/index/mobile/css/topic_nas_help-detail.css
index 2ae46671..f0cc39bb 100644
--- a/public/static/index/mobile/css/topic_nas_help-detail.css
+++ b/public/static/index/mobile/css/topic_nas_help-detail.css
@@ -40,9 +40,12 @@
 }
 
 .narshelpCenterdetail-app .nhlp-app-content {
-    margin: 1rem;
+    /* margin: 1rem; */
     height: 100%;
     margin-top: 9.2vh;
+    width: 90%;
+    margin: 0 auto;
+    margin-top: 1rem;
 }
 
 .narshelpCenterdetail-app #rendered-content img {