超出显示省略号

src/common/course/course.scss

@@ -3,6 +3,7 @@
   margin-top: 15px;
   margin-bottom: 5px;
   position: relative;
+
   img {
     width: 100%;
     height: 119px;
@@ -13,8 +14,5 @@
     color: $color_333;
     line-height: 19px;
     margin-top: 9px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
   }
 }

src/common/course/index.js

@@ -5,9 +5,9 @@ const Course = (props) => {
     return (
         <li className='course-item'>
             {props.top}
-            <a href="">
+            <a href="/#">
                 <img src={props.data.src} alt=""/>
-                <p className="course-title">{props.data.title}</p>
+                <p className="course-title text-overflow-2">{props.data.title}</p>
             </a>
             {props.bottom}
         </li>

src/styles/index.scss

@@ -10,7 +10,7 @@ $link-visited: #333; // 设置链接访问后的颜色
 $main-color: #09f; // 主体颜色
 
 // 字体
-$font-family-zh: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
+$font-family-zh: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
 $font-family-en: Arial, sans-serif !default;
 
 // 盒子模型
@@ -80,14 +80,17 @@ body {
 a {
   text-decoration: none;
   outline: none;
+
   &:hover,
   &:link,
   &:focus {
     text-decoration: none;
   }
+
   &:visited {
   }
 }
+
 // 暂时放置样式，后期需处理
 .homeImg {
   display: block;
@@ -112,21 +115,27 @@ a {
 }
 
 // 背景颜色
-.bg-white { background-color: #fff }
+.bg-white {
+  background-color: #fff
+}
 
 // 间隔
 .pt20 {
   padding-top: 20px;
 }
+
 .pt30 {
   padding-top: 30px;
 }
+
 .pt40 {
   padding-top: 40px;
 }
+
 .pt50 {
   padding-top: 50px;
 }
+
 .pt60 {
   padding-top: 60px;
 }
@@ -137,16 +146,45 @@ a {
 }
 
 // 请保证你的设计稿为750px宽，如果有其余字体大小，请在私有样式中设置
-.font-20 {font-size: 0.2rem;}
-.font-24 {font-size: 0.24rem;}
-.font-26 {font-size: 0.26rem;}
-.font-28 {font-size: 0.28rem;}
-.font-30 {font-size: 0.3rem;}
-.font-32 {font-size: 0.32rem;}
-.font-34 {font-size: 0.34rem;}
-.font-36 {font-size: 0.36rem;}
-.font-38 {font-size: 0.38rem;}
-.font-40 {font-size: 0.4rem;}
+.font-20 {
+  font-size: 0.2rem;
+}
+
+.font-24 {
+  font-size: 0.24rem;
+}
+
+.font-26 {
+  font-size: 0.26rem;
+}
+
+.font-28 {
+  font-size: 0.28rem;
+}
+
+.font-30 {
+  font-size: 0.3rem;
+}
+
+.font-32 {
+  font-size: 0.32rem;
+}
+
+.font-34 {
+  font-size: 0.34rem;
+}
+
+.font-36 {
+  font-size: 0.36rem;
+}
+
+.font-38 {
+  font-size: 0.38rem;
+}
+
+.font-40 {
+  font-size: 0.4rem;
+}
 
 // 设置block
 .block {
@@ -203,6 +241,7 @@ a {
   flex-direction: row;
   flex-wrap: wrap;
 }
+
 // 水平居中
 .hor-center {
   display: flex;
@@ -210,6 +249,7 @@ a {
   flex-wrap: nowrap;
   justify-content: center;
 }
+
 // 垂直居中
 .ver-center {
   display: flex;
@@ -295,7 +335,9 @@ img {
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 1;
+  /* autoprefixer: off; */
   -webkit-box-orient: vertical;
+  /* autoprefixer: on; */
 }
 
 // 字符超出两行溢出隐藏
@@ -304,7 +346,9 @@ img {
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
+  /* autoprefixer: off; */
   -webkit-box-orient: vertical;
+  /* autoprefixer: on; */
 }
 
 // 字符超出三行溢出隐藏
@@ -313,7 +357,9 @@ img {
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 3;
+  /* autoprefixer: off; */
   -webkit-box-orient: vertical;
+  /* autoprefixer: on; */
 }
 
 // 浮动控制
@@ -323,6 +369,7 @@ img {
     content: '';
     display: table;
   }
+
   &:after {
     clear: both;
   }
@@ -351,21 +398,27 @@ img {
 .z-50 {
   z-index: 50;
 }
+
 .z-100 {
   z-index: 100;
 }
+
 .z-150 {
   z-index: 150;
 }
+
 .z-200 {
   z-index: 200;
 }
+
 .z-250 {
   z-index: 250;
 }
+
 .z-max {
   z-index: 999999;
 }
+
 .overflow-h {
   overflow: hidden;
 }
@@ -390,6 +443,7 @@ input[type="radio"] {
   background: none;
   outline: none;
 }
+
 input[type="radio"]:before {
   position: absolute;
   content: '';
@@ -404,6 +458,7 @@ input[type="radio"]:before {
   border-radius: 50%;
   outline: 0;
 }
+
 input[type="radio"]:checked:after {
   position: absolute;
   z-index: 50;
@@ -418,6 +473,7 @@ input[type="radio"]:checked:after {
   border-radius: 50%;
   outline: 0;
 }
+
 input[type="radio"]:checked:before {
   position: absolute;
   z-index: 100;