背景：在實際業務開發中，有個場景需要展示一條路線，但路線節點可能會過多，過多時，需要將中間的節點扣出，用省略號來表示。
實現：項目使用vue框架，js實現。
效果：一條路線中，至少要保留首尾2個節點，其他節點放不下則用省略號匯總替換。
圖（1）一般情況下的效果：
圖（2）只能放收尾2個節點，且末尾節點過長的情況：
圖（3）只能放收尾2個節點，且首尾節點都過長的情況：
圖（4）只能放收尾2個節點，且開始節點都過長的情況：
（ps: 這種情況下展示效果不是最佳，需要優化，但沒想好方法，有好方案的歡迎補充共享）
代碼塊：
1 <template lang="pug"> 2 .employeeList 3 .box-wrap 4 .list(:class="{'list_flex':list.length===2}") 5 .item(v-for="(item,index) in list") 6 span.text {{item}} 7 i.el-icon-right(v-if="index!==list.length-1") 8 // 插入 9 el-tooltip(v-if="index === insertIndex" effect="dark" placement="bottom") 10 .insert 11 span {{"··· ( "+insertList.length+" )"}} 12 i.el-icon-right 13 .insertList(slot="content") 14 .one(v-for="one in insertList") {{one}} 15 </template> 16 <script> 17 export default { 18 data() { 19 return { 20 list: [ 21 "我第一個超級長***demo名demo名稱名稱名稱名稱名稱名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱名稱名稱名稱名稱名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱名稱名稱名稱名稱名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱名稱名稱名稱名稱名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱名稱名稱名稱名稱名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱稱1", 22 // "demo名稱名稱名稱名稱名稱名稱1", 23 "demo名稱名稱名稱名稱名稱名稱2", 24 "demo名稱名稱名稱名稱名稱名稱3", 25 "demo名稱名稱名稱名稱名稱名稱4", 26 "demo名稱5", 27 "de6", 28 "demo名稱名稱名稱名稱名稱名稱7", 29 "demo名稱名稱名稱名稱名稱名稱8", 30 "demo名稱名稱名稱名稱名稱名稱9", 31 "demo名稱名稱名稱名稱名稱名稱10", 32 "demo名稱名稱名稱名稱名稱名稱11", 33 "demo名稱名稱名稱名稱名稱名稱12", 34 "demo名稱名稱名稱名稱名稱名稱13", 35 // "我最后一個超級長*****demo名稱名稱名稱名稱名稱名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱demo名稱13", 36 ], 37 insertIndex: 0, 38 insertList: [], 39 }; 40 }, 41 mounted() { 42 this.deal(); 43 }, 44 methods: { 45 deal() { 46 let boxWidth = this.$el.querySelector(".box-wrap").offsetWidth - 32; 47 let listWidth = this.$el.querySelector(".list").scrollWidth; 48 if (listWidth > boxWidth) { 49 let index = this.list.length - 2; // 倒數第二個 50 if (index < 1) { 51 return; 52 } 53 this.insertIndex = index - 1; 54 this.insertList.unshift(this.list[index]); 55 this.list.splice(index, 1); 56 setTimeout(() => { 57 let newListWidth = this.$el.querySelector(".list").scrollWidth; 58 if (newListWidth > boxWidth) { 59 this.deal(); 60 } 61 }); 62 } else { 63 console.log(this.insertList, this.list); 64 return; 65 } 66 }, 67 }, 68 }; 69 </script> 70 <style lang="scss" scoped> 71 /deep/ * { 72 box-sizing: border-box; 73 } 74 * { 75 box-sizing: border-box; 76 } 77 .employeeList { 78 background: #fff; 79 height: 100%; 80 .box-wrap { 81 width: 100%; 82 padding: 0 16px; 83 .list { 84 display: inline-block; 85 overflow: hidden; 86 white-space: nowrap; 87 .item { 88 line-height: 32px; 89 font-size: 14px; 90 display: inline-block; 91 .el-icon-right { 92 margin: 0 8px; 93 } 94 .insert { 95 display: inline-block; 96 } 97 } 98 &.list_flex { 99 display: inline-flex; 100 width: 100%; 101 overflow: hidden; 102 .item { 103 display: inline-flex; 104 overflow: hidden; 105 align-items: center; 106 // &:first-child { 107 // flex: 1; 108 // } 109 &:last-child { 110 flex: 1; 111 min-width: 40%;// 這個是導致只有收尾節點，末尾節點不夠長，后面空白一段，展示效果不是最佳的原因 112 } 113 .text { 114 overflow: hidden; 115 text-overflow: ellipsis; 116 } 117 } 118 } 119 } 120 } 121 } 122 </style>