修改文字换行

src/assets/css/left.scss

@@ -1,4 +1,5 @@
- .left {
+
+.left {
      position: absolute;
      width: 412px;
      height: 900px;
@@ -166,7 +167,7 @@
              ul {
                  display: flex;
                  list-style: none;
-                 height: 40px;
+                 height: 48px;
                  line-height: 40px;
                  font-size: 12px;
                  border-bottom: 1px dotted #fff;
@@ -180,7 +181,8 @@
                      display: flex;
                      width: 100%;
                      align-items: center;
-                     justify-content: space-around
+                     justify-content: space-around;
+                     word-wrap: break-word;
                  }
              }
 
@@ -267,4 +269,17 @@
  .scroll::-webkit-scrollbar-thumb {
      background-color: #999;
      border-radius: 3px;
- }
+ }
+
+ .jiaos{
+    // background-color: antiquewhite;
+    // color: #000;
+    // overflow-wrap: break-word; 
+    display: flex;
+    align-items: center;
+
+    text-align: center;
+    flex-wrap: wrap;
+    line-height: 16px;
+    
+}

src/components/left.vue

@@ -50,7 +50,7 @@
                     </ul>
                     <div ref="testMain" style="height: 310px;overflow: scroll;" class="scroll">
                         <ul v-for="item in classRoom" @mouseenter="testMove" @mouseleave="testMend">
-                            <li> {{ item.class }} </li>
+                            <li class="jiaos"> {{ item.class }} </li>
                             <li>{{ item.status }}</li>
                             <li>{{ item.people }}</li>
                             <li>{{ item.percentage }}</li>