Question

有什么办法可以“堆叠”jQuery UI Tabs Header吗？请允许我解释一下：我有标签可能需要两个或更多的单词才能使标题不言自明。例如：

“PDP未开发”

我的问题是，在添加一堆标签时，我的空间不足。因此，而不是将标签写为

PDP Undeveloped

我希望它显示为

    PDP
Undeveloped

这可能吗？如果没有，那么有其他方法可以解决这个问题吗？

提前致谢。

巴勒特

Answer 1

我建议使用<br />标签。由于您只希望它们在空间不足时生效，我建议使用媒体查询打开多行显示。

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc <br />tincidunt</a></li>
        <li><a href="#tabs-2">Proin <br />dolor</a></li>
        <li><a href="#tabs-3">Aenean <br />lacinia</a></li>
    </ul>
    <div id="tabs-1">Tab 1</div>
    <div id="tabs-2">Tab 2</div>
    <div id="tabs-3">Tab 3</div>
</div>

<style>
    br { display: none; }

    /* Replace 700px with whatever width you want the multi line display to start */
    @media screen and (max-width: 700px) {
        .ui-tabs li { height: 4em; }    
        br { display: inline; }
    }
</style>

实例：http://jsfiddle.net/vvpeF/

jQuery UI选项卡 - 样式标题

1 个答案: