diff --git a/packages/editor/src/layouts/workspace/PageBar.vue b/packages/editor/src/layouts/workspace/PageBar.vue
index d34265f7..559a40aa 100644
--- a/packages/editor/src/layouts/workspace/PageBar.vue
+++ b/packages/editor/src/layouts/workspace/PageBar.vue
@@ -11,9 +11,13 @@
         :class="{ active: page?.id === item.id }"
         @click="switchPage(item)"
       >
-        <slot name="page-bar-title" :page="item">
-          <span>{{ item.name }}</span>
-        </slot>
+        <div class="m-editor-page-bar-title">
+          <slot name="page-bar-title" :page="item">
+            <el-tooltip effect="dark" placement="top-start" :content="item.name">
+              <span>{{ item.name }}</span>
+            </el-tooltip>
+          </slot>
+        </div>
 
         <el-popover placement="top" :width="160" trigger="hover">
           <div>
diff --git a/packages/editor/src/theme/page-bar.scss b/packages/editor/src/theme/page-bar.scss
index d44f0514..886498e2 100644
--- a/packages/editor/src/theme/page-bar.scss
+++ b/packages/editor/src/theme/page-bar.scss
@@ -10,6 +10,7 @@
   color: $--font-color;
   border-top: 1px solid $--border-color;
   z-index: 2;
+  overflow: hidden;
 
   .m-editor-page-bar-item {
     padding: 0 10px;
@@ -27,5 +28,12 @@
         cursor: pointer;
       }
     }
+
+    .m-editor-page-bar-title {
+      max-width: 150px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
   }
 }