根據所選語言更改字體大小或div類

Question

我在帶有徽標和內容的頁面中居中進行水平導航。 在頁面上有語言翻譯，例如英語（默認），法語，俄語和德語。 當您單擊這些鏈接時，網站上的文本會更改。

我唯一的問題是，當語言從英語更改為俄語或德語時，導航欄上的文本會隨着單詞的變長而中斷到另一行（對於內容來說，只需要在一行上導航就可以了！）。 這不是很吸引人，我無法在整個頁面上顯示文字，因為每側都有樣式，文字必須留在邊框頂部。

我唯一的解決方案是根據所選的語言更改填充/字體大小？ （除非有人知道更好的解決方案）。

我只能考慮創建某種jQuery函數，以檢測哪種語言處於活動狀態（因為在選擇語言列表時，語言列表具有活動的類），然后取決於語言的變化或向nav類添加CSS樣式？

希望任何人都能在正確的方向或相關信息的任何鏈接上幫助我。

我將在此處放置html和css標記/演示，但可能沒有任何幫助：

html范例：

<div id = "navigation">
   <ul class "nav">
      <li> <a href...... class="active">link</a></li>
   <ul>
</div>

我的語言列表基本上與右上角的菜單幾乎相同。

CSS：

.nav {
    width:80%;
    border:1px solid #ccc;
    border-width:1px 0;
    list-style:none;
    margin:auto;
    padding:0;
    text-align:center;
}

.nav li{
    display:inline;
}
.nav a{
    display:inline-block;
    padding:10px 5px;
}

Answer 1

您可以為<body>標記分配一個唯一的語言類，然后使用該類根據所選語言將特定樣式應用於導航。

例：

<body class="language-english">...

然后是CSS ...

.language-english .nav { font-size: 12px; }

您也可以考慮較長的翻譯文本，並使導航更加動態/流暢，以適應不同的文本長度。

Answer 2

和jQuery解決方案：

 $(document).ready(function() {    
        $('#navigation a').on('click', function() { 
          if( $(this).attr('href') == 'russian' || $(this).attr('href') == 'german') {
            $('.nav').css('fontSize', '11px');
          };
        });
    })

根據href屬性更改字符串“ russian”和“ german”。

根據所選語言更改字體大小或div類

問題描述

2 個解決方案

解決方案1
3 2013-05-20 21:17:53

解決方案2
0 2013-05-20 21:43:45

根據所選語言更改字體大小或div類

問題描述

2 個解決方案

解決方案1 3 2013-05-20 21:17:53

解決方案2 0 2013-05-20 21:43:45

解決方案1
3 2013-05-20 21:17:53

解決方案2
0 2013-05-20 21:43:45