jQuery UI選項卡 - 樣式標題

有什麼辦法可以「堆疊」jQuery UI選項卡標題？請允許我解釋一下：我有可能需要兩個或兩個以上單詞的標題，以便不言自明。例如：jQuery UI選項卡 - 樣式標題

「PDP欠發達」

我的問題是，我跑出來的空間將一堆標籤的時候。因此，而不是寫在標籤爲

PDP Undeveloped

我想它顯示爲

PDP 
Undeveloped

這可能嗎？如果沒有，那麼是否有解決這個問題的替代方法？

在此先感謝。

巴拉特

來源

2012-05-23 Bharat

自動您是什麼意思？所以當超過寬度時，強制製表符換行空白？ –

我希望我可以明確地強迫它在某些單詞結尾處中斷。類似於HTML中的
標記？ – Bharat

我會建議使用<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/

來源

2012-05-23 18:10:39

謝謝。它完美的工作！儘管如此，我還有一個後續問題，如果我只有一個單詞，那麼標籤只顯示一半高度。有沒有辦法在下一行放置不可見空間，以便所有標籤具有相同的高度？ – Bharat

據我所知，如果沒有在''''..ui-tabs li'''上設置一個明確的''''''就像我在我的例子中做的那樣，就沒有辦法做到這一點。有一個jQuery UI bug添加一些機制來實現這一點，它與手風琴插件的「autoHeight」和「fillSpace」選項類似（http://jqueryui.com/demos/accordion/# option-autoHeight） - http://bugs.jqueryui.com/ticket/8345。 –

謝謝。我發現了一個相當可行的解決這個問題的方法。事實證明，如果我使用不間斷的空格html實體（＆nbsp），我會得到期望的效果:) – Bharat

jQuery UI選項卡 - 樣式標題

回答

相關問題