diff --git a/ui/src/views/system/role/index.vue b/ui/src/views/system/role/index.vue
index 9ddc8d63a..30e22ffdb 100644
--- a/ui/src/views/system/role/index.vue
+++ b/ui/src/views/system/role/index.vue
@@ -64,8 +64,8 @@
                 >
                   <template #default="{ row }">
                     <div class="flex-between">
-                      <span>
-                        {{ row.role_name }}
+                      <span class="flex align-center mr-8">
+                        <div class="ellipsis" style="flex: 1">{{ row.role_name }}</div>
                         <span class="color-input-placeholder ml-4"
                           >({{ roleTypeMap[row.type as RoleTypeEnum] }})</span
                         >