管理系统离不开多 tab ，多 tab 页就有可能因为页数太多导致部分 tab 页被隐藏等功能异常。
这里记录个类似浏览器 tab 页功能样式，多 tab 页时采取压缩 tab 页宽度 及 文本超出 变为 ... 形式：
<!DOCTYPE html> <html> <style type="text/css"> .box { margin: 0 auto; border: 1px solid #ddd; padding: 10px; display: flex; flex-direction: row; } .item { border: 1px solid #ddd; margin-bottom: 20px; padding: 10px; flex-basis: 100px; display: inline-block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } </style> <body> <div class="box"></div> <script> window.onload = () => { let box = document.getElementsByClassName('box')[0]; let frag = document.createDocumentFragment(); for (let i = 0; i < 9; i++) { let item = document.createElement('div'); item.className = 'item'; item.title = item.innerHTML = Math.random(); frag.appendChild(item); } box.appendChild(frag); } </script> </body> </html>
主要用到的就是 【 flex-basis 】
页面足够宽时，默认宽度展示：
不够宽时，压缩展示：
