修正富文本拼音效果分段问题

src/components/PinyinText.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="pinyin-area">
     <div v-for="(paragraph, i) in paragraphList" :key="i" class="pinyin-paragraph">
-      <div
+      <span
         v-for="(sentence, j) in paragraph"
         :key="j"
         class="pinyin-sentence"
         :style="{ 'align-items': pinyinPosition === 'top' ? 'flex-end' : 'flex-start' }"
       >
-        <div v-for="(item, k) in sentence" :key="k" class="pinyin-text">
+        <span v-for="(item, k) in sentence" :key="k" class="pinyin-text">
           <span
             :class="{ active: visible && word_index == k && paragraph_index === i && sentence_index === j }"
             :title="isPreview ? '' : '点击校对'"
@@ -31,8 +31,8 @@
             <span class="py-char">{{ item.text }}</span>
             <span v-if="pinyinPosition !== 'top'" class="pinyin">{{ item.pinyin.replace(/\s+/g, '') }}</span>
           </span>
-        </div>
-      </div>
+        </span>
+      </span>
     </div>
 
     <CorrectPinyin :visible.sync="visible" :select-content="selectContent" @fillTonePinyin="fillTonePinyin" />
@@ -99,19 +99,15 @@ export default {
 <style lang="scss" scoped>
 .pinyin-area {
   .pinyin-paragraph {
-    display: flex;
-    flex-direction: column;
-
     .pinyin-sentence {
-      display: flex;
-      flex-wrap: wrap;
-      column-gap: 4px;
-
       .pinyin-text {
+        padding: 0 2px;
         font-size: 16px;
+        text-wrap: pretty;
+        hanging-punctuation: allow-end;
 
         > span {
-          display: flex;
+          display: inline-flex;
           flex-direction: column;
           align-items: center;
         }
@@ -121,7 +117,7 @@ export default {
         }
 
         .pinyin {
-          font-family: 'League';
+          font-family: 'PINYIN-B';
           font-size: 12px;
           font-weight: lighter;
           line-height: 12px;