垂直的jQuery标签，其文本封装在超过选项卡宽度的制表符中

Question

使用下面的示例(Vertical Tabs (stackoverflow)，我能够垂直地处理jquery选项卡)。

<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，文本包装: normal等。

Answer 1

应用以下更改(空白:normal；)：

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;
}