Browse Source

优化首页文本超出显示省略号

damon227 6 months ago
parent
commit
0bd51204ce
1 changed files with 10 additions and 0 deletions
  1. 10 0
      src/views/common/home.vue

+ 10 - 0
src/views/common/home.vue

@@ -407,6 +407,11 @@ export default {
           p{
             margin: 0;
             text-indent: 2em;
+            display: -webkit-box;              /* 创建一个伸缩容器 */
+            -webkit-box-orient: vertical;      /* 设置为纵向排列 */
+            overflow: hidden;                  /* 隐藏超出的部分 */
+            -webkit-line-clamp: 7;             /* 限制文本最多显示两行 */
+            text-overflow: ellipsis;           /* 超出部分用省略号显示 */
           }
         }
       }
@@ -472,6 +477,11 @@ export default {
           text-align: left;
           font-style: normal;
           text-indent: 2em;
+          display: -webkit-box;              /* 创建一个伸缩容器 */
+          -webkit-box-orient: vertical;      /* 设置为纵向排列 */
+          overflow: hidden;                  /* 隐藏超出的部分 */
+          -webkit-line-clamp: 2;             /* 限制文本最多显示两行 */
+          text-overflow: ellipsis;           /* 超出部分用省略号显示 */
         }
       }
       .msg-5{