From 6b4e6533f570a8867f165dc3733ad3549a7fef1c Mon Sep 17 00:00:00 2001
From: lyswhut <lyswhut@qq.com>
Date: Fri, 3 May 2024 18:52:39 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=96=87=E6=9C=AC=E6=8F=90?=
 =?UTF-8?q?=E7=A4=BA=E6=B0=94=E6=B3=A1=E5=9C=A8=E5=86=85=E5=AE=B9=E8=BF=87?=
 =?UTF-8?q?=E9=95=BF=E6=97=B6=EF=BC=8C=E6=96=87=E6=9C=AC=E6=9C=AA=E8=A2=AB?=
 =?UTF-8?q?=E6=8D=A2=E8=A1=8C=E8=80=8C=E8=A2=AB=E6=88=AA=E6=96=AD=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 publish/changeLog.md               |  1 +
 src/renderer/plugins/Tips/Tips.vue | 20 +++++++++++++++-----
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/publish/changeLog.md b/publish/changeLog.md
index 5768d31f..6fae43fc 100644
--- a/publish/changeLog.md
+++ b/publish/changeLog.md
@@ -18,6 +18,7 @@
 - 修复播放详情页的歌词无法使用触碰拖动的问题（#1865）
 - 修复与优化繁体中文、英语翻译显示（#1845）
 - 修复歌曲时文件名过长导致歌曲无法下载的问题（#1877）
+- 修复文本提示气泡在内容过长时，文本未被换行而被截断的问题
 
 ### 变更
 
diff --git a/src/renderer/plugins/Tips/Tips.vue b/src/renderer/plugins/Tips/Tips.vue
index e7c20fab..4e1fcfa5 100644
--- a/src/renderer/plugins/Tips/Tips.vue
+++ b/src/renderer/plugins/Tips/Tips.vue
@@ -1,7 +1,7 @@
 <template>
   <transition name="tips-fade" @after-leave="afterLeave">
     <div
-      v-show="visible" ref="dom_tips" :style="{ left: position.left + 'px' , top: position.top + 'px', transform: transform }"
+      v-show="visible" ref="dom_tips" :style="{ left: position.left + 'px' , top: position.top + 'px', transform, maxWidth, }"
       :class="$style.tips" role="presentation"
     >
       {{ message }}
@@ -26,6 +26,7 @@ export default {
         left: 0,
       },
       transform: 'translate(0, 0)',
+      maxWidth: '80%',
       cancel: null,
       setTips: null,
       aotoCloseTimer: null,
@@ -34,7 +35,10 @@ export default {
   watch: {
     message() {
       this.$nextTick(() => {
-        this.transform = `translate(${this.handleGetOffsetXY(this.position.left, this.position.top)})`
+        this.maxWidth = this.handleGetMaxWidth(this.position.left) + 'px'
+        this.$nextTick(() => {
+          this.transform = `translate(${this.handleGetOffsetXY(this.position.left, this.position.top)})`
+        })
       })
     },
   },
@@ -43,10 +47,15 @@ export default {
     el.parentNode.removeChild(el)
   },
   methods: {
+    handleGetMaxWidth(left) {
+      const containerWidth = document.documentElement.clientWidth
+      let maxWidth = containerWidth - left
+      return (maxWidth > left ? maxWidth : left - 12) - 30
+    },
     handleGetOffsetXY(left, top) {
       const tipsWidth = this.$refs.dom_tips.clientWidth
       const tipsHeight = this.$refs.dom_tips.clientHeight
-      const dom_container = document.body
+      const dom_container = document.documentElement
       const containerWidth = dom_container.clientWidth
       const containerHeight = dom_container.clientHeight
       const offsetWidth = containerWidth - left - tipsWidth
@@ -76,7 +85,7 @@ export default {
   padding: 4px 5px;
   z-index: 10001;
   font-size: 12px;
-  max-width: 80%;
+  // max-width: 80%;
   color: var(--color-font);
   border-radius: 3px;
   background: var(--color-content-background);
@@ -84,7 +93,8 @@ export default {
   pointer-events: none;
   // text-align: justify;
   box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
-  white-space: pre;
+  white-space: pre-wrap;
+  box-sizing: border-box;
 }
 
 :global(.tips-fade-enter-active), :global(.tips-fade-leave-active) {