溢出隐藏

src/views/edu_teach/index.vue

@@ -50,15 +50,15 @@
           </div>
         </div>
       </el-col>
-      <el-col :xs="16" :sm="16" :md="14" :lg="12" :xl="12">
+      <el-col :xs="16" :sm="16" :md="14" :lg="12" :xl="12" >
         <el-row>
           <el-col>
             <div class="tab">
-              <el-breadcrumb separator-class="el-icon-arrow-right">
-                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
-                <el-breadcrumb-item>教育教学</el-breadcrumb-item>
-                <el-breadcrumb-item :to="{ path: '/' }">教学督导</el-breadcrumb-item>
-              </el-breadcrumb>
+              <router-link to="/">首页</router-link>
+              <span> > </span>
+              <router-link to="">教育教学</router-link>
+              <span> > </span>
+              <span style="color: #1956BC;font-size: 1.4rem">教学督导</span>
             </div>
           </el-col>
         </el-row>
@@ -303,7 +303,6 @@ export default {
           width: 13.5rem;
           height: 6rem;
           line-height: 6rem;
-
           .lab_img {
             margin-top: .1rem;
             width: 1.05rem;
@@ -311,7 +310,6 @@ export default {
             display: none;
             margin-left: 3rem;
           }
-
           .lab_title {
             margin-left: 1.5rem;
           }
@@ -344,7 +342,7 @@ export default {
     }
 
     .tw_time {
-      border-right: .2rem solid #D5D5D5;
+      border-right: .1rem solid #D5D5D5;
       height: 10rem;
       width: 10rem;
       color: #1956BC;
@@ -369,7 +367,11 @@ export default {
       font-family: PingFangSC-Medium, PingFang SC;
       color: #161616;
 
+
       .tw_context_title {
+        overflow:hidden; //超出的文本隐藏
+        text-overflow:ellipsis; //溢出用省略号显示
+        white-space:nowrap; //溢出不换行
         font-size: 2rem;
         font-weight: 600;
         padding-right: 2rem;
@@ -380,6 +382,11 @@ export default {
         margin-top: .8rem;
         font-size: 1.6rem;
         font-weight: 400;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display:-webkit-box; //作为弹性伸缩盒子模型显示。
+        -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
+        -webkit-line-clamp:3; //显示的行
       }
     }