diff --git a/ui-src/src/components/RubyText.vue b/ui-src/src/components/RubyText.vue
index 48ef1ae..30674a0 100644
--- a/ui-src/src/components/RubyText.vue
+++ b/ui-src/src/components/RubyText.vue
@@ -1,10 +1,10 @@
 <template>
-  <text class="ruby-wrap" :class="{ dark: dark }">
-    <text v-for="(ch, i) in pairs" :key="i" class="ruby-unit">
+  <view class="ruby-wrap" :class="{ dark: dark }">
+    <view v-for="(ch, i) in pairs" :key="i" class="ruby-unit">
       <text v-if="ch.p && show" class="ruby-py">{{ ch.p }}</text>
       <text class="ruby-ch">{{ ch.c }}</text>
-    </text>
-  </text>
+    </view>
+  </view>
 </template>
 
 <script>
@@ -28,14 +28,14 @@ export default {
 
 <style scoped>
 .ruby-wrap {
-  display: inline;
+  display: flex;
+  flex-wrap: wrap;
   line-height: 1.9;
 }
 .ruby-unit {
-  display: inline-flex;
+  display: flex;
   flex-direction: column;
   align-items: center;
-  vertical-align: top;
   margin: 0 2rpx;
 }
 .ruby-py {