fixed text overflow

Author: ilya101master

src/components/EventRow.vue

@@ -7,24 +7,15 @@
             <div>
                 <b>{{lesson.name}}</b>
             </div>
-            <div>
-                <span 
-                    v-for="info in lesson.lecturer" :key="info.id" :info="info"
-                >
-                    {{formatLecturer(info)}}&ensp;
-                </span> 
-                <span v-if="lesson.lecturer && lesson.room"> &bull;&ensp;
-                </span> 
-                <span 
-                    v-for="info in lesson.room" :key="info.id" :info="info"
-                >
-                    {{info.name}}&ensp;
+            <div class="extra">
+                <span v-html="this.formatInfo(lesson.lecturer, lesson.room)">
                 </span>
             </div>
         </div>
     </li>
 </template>
 <script>
+
 export default{
     props:{
         lesson:{
@@ -35,8 +26,22 @@ export default{
     methods:{
         formatLecturer(info){
             if (!info.middle_name)
-                return `${info.last_name} ${info.first_name[0]}.`;
-            return `${info.last_name} ${info.first_name[0]}.${info.middle_name[0]}.`;
+                return `${info.last_name} ${info.first_name[0]}. `;
+            return `${info.last_name} ${info.first_name[0]}.${info.middle_name[0]}. `;
+        },
+        formatInfo(lecturer, room){
+            let total = '';
+            
+            room.forEach(element => {
+                total += `${element.name} `
+            })
+            if (lecturer.length && room.length)
+                total += `&bull;&ensp;`;
+            lecturer.forEach(element => {
+                total += `${this.formatLecturer(element)}`;
+            });
+            
+            return total;
         }
     }
 }
@@ -71,16 +76,27 @@ export default{
         padding-left: 10px;
 
     }
-
+    div.extra{
+        display: flex;
+        gap:5%;
+        width: 90%;
+    }
+    span{
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        flex-wrap: nowrap;
+        text-align: center;
+    }
     .info{
         display: flex;
         flex-direction: column;
         align-items: flex-start;
         padding-right: 10px;
         gap: 5px;
-
+        text-overflow: ellipsis;
         /* Inside auto layout */
-
+        flex-wrap: nowrap;
         flex: 1;
         order: 1;
     }