限制用户名显示长度

src/components/card/VideoCard.vue

@@ -31,7 +31,7 @@
         <div v-if="video.user !== undefined && video.user !== null" style="padding: 14px">
           <span style="left: 0;margin-bottom: 0px;color: black;">
             <router-link target="_blank" :to="`/user/${video.user.userId}`">
-              <i class="el-icon-user"> {{ video.user.screenName }} </i></router-link> • {{ video.pubDateStr }}
+              <i class="el-icon-user"> {{ video.user.screenName | ellipsisUsername }} </i></router-link> • {{ video.pubDateStr }}
           </span>
         </div>
         <div v-if="video.user === undefined || video.user === null" style="padding: 14px">
@@ -57,6 +57,14 @@ export default {
         return value.slice(0, max) + '...'
       }
       return value
+    },
+    ellipsisUsername(value) {
+      if (!value) return ''
+      const max = 5
+      if (value.length > max) {
+        return value.slice(0, max) + '...'
+      }
+      return value
     }
   },
   props: {
@@ -113,6 +121,7 @@ export default {
   height: 50px;
   overflow: hidden;
   text-overflow: ellipsis;
+  text-overflow: ellipsisUsername;
   display: -webkit-box;
   -webkit-line-clamp: 2; /*行数*/
   -webkit-box-orient: vertical;