diff --git a/pages/CSS/text/text-overflow.uvue b/pages/CSS/text/text-overflow.uvue
index 5445acf9046e4c5f86c5212187bb581a4643be9e..649cfbc18104d079e80c94ac37117d378a841ee0 100644
--- a/pages/CSS/text/text-overflow.uvue
+++ b/pages/CSS/text/text-overflow.uvue
@@ -1,9 +1,18 @@
 <template>
   <view style="flex-grow: 1;">
-    <view style="height: 250px;background-color: gray;justify-content: center;align-items: center;">
-      <text class="common" style="text-overflow: clip;white-space: normal;">{{text}}</text>
-      <text class="common" style="text-overflow: clip;white-space: nowrap;">{{text}}</text>
-      <text class="common" style="text-overflow: ellipsis;white-space: nowrap;">{{text}}</text>
+    <view style="height: 250px;padding: 0 30px; background-color: gray;justify-content: center;">
+      <view class="margin-bottom-10">
+        <text class="font-weight-bold">text-overflow:clip white-space:nowrap</text>
+        <text class="font-size-20" style="text-overflow: clip;white-space: nowrap;">{{text}}</text>
+      </view>
+      <view class="margin-bottom-10">
+        <text class="font-weight-bold">text-overflow:ellipsis white-space:nowrap</text>
+        <text class="font-size-20" style="text-overflow: ellipsis;white-space: nowrap;">{{text}}</text>
+      </view>
+      <view class="margin-bottom-10">
+        <text class="font-weight-bold">white-space:normal</text>
+        <text class="font-size-20" style="white-space: normal;">{{text}}</text>
+      </view>
     </view>
   </view>
 </template>
@@ -19,9 +28,15 @@
 </script>
 
 <style>
-  .common {
-    width: 250px;
-    height: 30px;
+  .font-size-20 {
     font-size: 20px;
   }
+
+  .font-weight-bold {
+    font-weight: bold;
+  }
+
+  .margin-bottom-10 {
+    margin-bottom: 10px;
+  }
 </style>