修复文本提示气泡在内容过长时，文本未被换行而被截断的问题

publish/changeLog.md

@@ -18,6 +18,7 @@
 - 修复播放详情页的歌词无法使用触碰拖动的问题（#1865）
 - 修复与优化繁体中文、英语翻译显示（#1845）
 - 修复歌曲时文件名过长导致歌曲无法下载的问题（#1877）
+- 修复文本提示气泡在内容过长时，文本未被换行而被截断的问题
 
 ### 变更
 

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,
@@ -33,9 +34,12 @@ export default {
   },
   watch: {
     message() {
+      this.$nextTick(() => {
+        this.maxWidth = this.handleGetMaxWidth(this.position.left) + 'px'
         this.$nextTick(() => {
           this.transform = `translate(${this.handleGetOffsetXY(this.position.left, this.position.top)})`
         })
+      })
     },
   },
   beforeUnmount() {
@@ -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) {