jquery - 選択した言語に応じて font-size または div クラスを変更します

Question

ロゴとコンテンツを含むページの中央に水平ナビゲーションがあります。このページには、英語 (デフォルト)、フランス語、ロシア語、ドイツ語などの言語翻訳があります。これらのリンクをクリックすると、Web サイトのテキストが変わります。

私の唯一の問題は、言語が英語からロシア語またはドイツ語に変更された場合、単語が長くなるため、ナビゲーションのテキストが別の行に分割されることです (コンテンツはナビゲーションを 1 行で表示したいだけです!)。これは魅力的ではなく、ページ全体にテキストを配置することはできません。これは、テキストが収まる必要がある各サイドとボーダートップがあるためです。

私の唯一の解決策は、選択した言語に応じてパディング/フォントサイズを変更することですか? （誰かがより良い解決策を知らない限り）。

どの言語がアクティブであるかを検出するある種の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;
}