带有文本的垂直 jQuery 选项卡包含在比选项卡宽度更长的选项卡中答案

【问题标题】：Vertical jQuery Tabs with Text wrapped in tabs of longer than tab width带有文本的垂直 jQuery 选项卡包含在比选项卡宽度更长的选项卡中
【发布时间】：2017-03-03 12:06:14
【问题描述】：

使用以下示例（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 中。尝试（但不限于） display: flex, text-wrap: normal 等。

【问题讨论】：

标签： html css jquery-ui-tabs

【解决方案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;
}

【讨论】：