Question

使用以下示例（Vertical Tabs (stackoverflow)我可以垂直查找jquery选项卡。

HTML

<div id="ProductTabs" style="height:685px;overflow:scroll;">
    <ul>
        <li><a href="#tabs-1">Quick long description exceeding tab width<span title ="" class="glyphicon glyphicon-pushpin color-for-0"></span></a></li>
        <li><a href="#tabs-2">Quick long description exceeding tab width<span title ="" class="glyphicon glyphicon-pushpin color-for-1"></span></a></li>
        <li><a href="#tabs-3">Quick long description exceeding tab width<span title ="" class="glyphicon glyphicon-pushpin color-for-2"></span></a></li>
        <li><a href="#tabs-4">Quick long description exceeding tab width<span title ="" class="glyphicon glyphicon-pushpin color-for-3"></span></a></li>
        <li><a href="#tabs-5">Quick long description exceeding tab width<span title ="" class="glyphicon glyphicon-pushpin color-for-4"></span></a></li>
        <li><a href="#tabs-6">Quick long description exceeding tab width<span title ="" class="glyphicon glyphicon-pushpin color-for-5"></span></a></li>
        <li><a href="#tabs-7">Quick long description exceeding tab width<span title ="" class="glyphicon glyphicon-pushpin color-for-6"></span></a></li>
        <li><a href="#tabs-8">Quick long description exceeding tab width<span title ="" class="glyphicon glyphicon-pushpin color-for-7"></span></a></li>
        <li><a href="#tabs-9">Quick long description exceeding tab width<span title ="" class="glyphicon glyphicon-pushpin color-for-8"></span></a></li>
        <li><a href="#tabs-10">Quick long description exceeding tab width<span title ="" class="glyphicon glyphicon-pushpin color-for-9"></span></a></li>
        <li><a href="#tabs-11">Quick long description exceeding tab width<span title ="" class="glyphicon glyphicon-pushpin color-for-10"></span></a></li>
    </ul>
    <<div id="tabs-1">...</div>
    <<div id="tabs-2">...</div>
    <<div id="tabs-3">...</div>
    <<div id="tabs-4">...</div>
    <<div id="tabs-5">...</div>
    <<div id="tabs-6">...</div>
    <<div id="tabs-7">...</div>
    <<div id="tabs-8">...</div>
    <<div id="tabs-9">...</div>
    <<div id="tabs-10">...</div>
    <<div id="tabs-11">...</div>
</div>

CSS

.ui-tabs-vertical {
    width: 65em;
    display: flex;
}

    .ui-tabs-vertical .ui-tabs-nav {
        padding: .2em .1em .2em .2em;
        float: left;
        width: 12em;
        overflow:hidden;

    }

        .ui-tabs-vertical .ui-tabs-nav li {
            clear: left;
            width: 100%;
            border-bottom-width: 1px !important;
            border-right-width: 0 !important;
            margin: 0 -1px .2em 0;
        }

            .ui-tabs-vertical .ui-tabs-nav li a {
                clear:both;
                display:block;
            }

            .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
                padding-bottom: 0;
                padding-right: .1em;
                border-right-width: 1px;
            }

    .ui-tabs-vertical .ui-tabs-panel {
        padding: 1em;
        float: right;
        width: 51em;
    }

脚本

    $(function () {
        $("#ProductTabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
        $("#ProductTabs li").removeClass("ui-corner-top").addClass("ui-corner-left");
    });

我无法弄清楚如何在单个标签中包装长文本。唯一可行的样式是溢出：隐藏在CSS中。尝试（但不限于）显示：flex，text-wrap：normal等等。

Answer 1

应用以下更改（空格：正常;）：

<强> CSS

.ui-tabs-vertical .ui-tabs-nav li {
    white-space:normal;
    clear: left;
    width: 100%;
    border-bottom-width: 1px !important;
    border-right-width: 0 !important;
    margin: 0 -1px .2em 0;
}

和

.ui-tabs-vertical .ui-tabs-nav li a {
    max-width: 12em;
    display: block;
}

带有Text的垂直jQuery选项卡包含在长度超过选项卡宽度的选项卡中

1 个答案: