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

我在具有徽標和內容的頁面中居中放置了一個水平導航。在頁面上有語言翻譯，如英語（默認），法語，俄語和德語。當您點擊這些鏈接時，網站上的文字會發生變化。根據所選語言更改字體大小或div類

我唯一的問題是當語言從英語更改爲俄語或德語時，導航上的文本隨着單詞更長而打破另一行（對於內容而言，它只是想要在一行上導航！）。這不是很有吸引力，我不能在整個頁面上顯示文字，因爲每一面都有一個樣式，文本必須保留在邊框的頂部。

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

我只能想到創建某種類型的jQuery函數來檢測哪種語言是活動的（因爲語言列表在選擇時有一個活動類），然後根據語言更改或將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; 
}

來源

2013-05-20 user2212564

你可以一個獨特的語言類分配給您的<body>標籤，並用它爲特定樣式應用到基於關閉所選的語言的你的資產淨值。

例子：

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

那麼對於CSS ...

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

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

來源

2013-05-20 21:17:53 Axel

而jQuery的解決方案：

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

更改字符串 '俄羅斯'，並根據在href屬性 '德國'。

來源

2013-05-20 21:43:45 Maujor

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

回答

相關問題