随笔- 293 文章- 0 评论- 34 阅读- 33万

tab 页签宽度自适应

管理系统离不开多 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>