Sfoglia il codice sorgente

视频标题过长时, 使用 ... 代替多余内容

reghao 3 anni fa
parent
commit
bceba53ab7

+ 7 - 1
src/components/card/collection-card.vue

@@ -12,7 +12,7 @@
     </router-link>
     <v-row>
       <v-col cols="10">
-        <p style="font-size: 15px; margin-bottom: 0px;color: black;">
+        <p class="text-over" style="font-size: 15px; margin-bottom: 0px;color: black;">
           <router-link :to="`/video/${videoInfo.videoId}`" style="color: black;"> {{ videoInfo.title }} </router-link>
         </p>
       </v-col>
@@ -42,4 +42,10 @@ export default {
 </script>
 
 <style>
+.text-over {
+  /* 指定宽度 */
+  white-space: nowrap;  /* 不换行,如果是span就可以不用这个 */
+  overflow: hidden;     /* 溢出内容隐藏 */
+  text-overflow: ellipsis; /* 文本溢出时显示省略号 */
+}
 </style>

+ 7 - 1
src/components/card/video-card.vue

@@ -21,7 +21,7 @@
         </router-link>
       </v-col>
       <v-col cols="10">
-        <p style="font-size: 15px; margin-bottom: 0px;color: black;">
+        <p class="text-over" style="font-size: 15px; margin-bottom: 0px;color: black;">
           <router-link :to="`/video/${videoInfo.videoId}`" style="color: black;"> {{ videoInfo.title }} </router-link>
         </p>
         <p style="font-size: 10px; color: #606060;">
@@ -58,4 +58,10 @@ export default {
 </script>
 
 <style>
+.text-over {
+  /* 指定宽度 */
+  white-space: nowrap;  /* 不换行,如果是span就可以不用这个 */
+  overflow: hidden;     /* 溢出内容隐藏 */
+  text-overflow: ellipsis; /* 文本溢出时显示省略号 */
+}
 </style>