0

![ここに画像の説明を入力][1]基本的に、ccs3 でラジオ ボタン付きの素敵なタブをいくつか作成しました。これはブラウザで見栄えがよく、扱いやすくなります。

ただし、これはモバイル デバイスには当てはまりません。テキストは、タブのかなり小さなコンテナーからはみ出します。適切なメディアクエリは何もしていないようです.これを機能させる方法についてのアイデアはありますか?

.tabs {
    position: relative;   
    min-height: 260px; /* Changes the height of the tabs section, enables you to change it for your text */
    clear: both;
}

@media only screen and (max-width: 480px)  {
    .tabs {
        min-height: 480px; /* Changes the height of the tabs section (MOBILE), enables you to change it for your text */
    }
}

だから私がやろうとしているのは、メディアクエリを機能させて、コンテナ内のテキストを含むタブの高さを変更できるようにすることです。

http://mdixon94.co.uk/HTML/elements.html

下にスクロールするとタブセクションがうまく見えることがわかりますが、たとえばiPhoneでプレビューすると、テキストがどこにでも表示され、メディアクエリでコンテナを大きくしたいだけです。

4

2 に答える 2

0

CSSで省略記号を使用できます

.tabs {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

これはあなたに次のようなものを与えるはずです:

デスクトップ
|これは私のタブのテキストです|
モバイル
|これは私の...|

于 2013-10-22T17:12:59.407 に答える
0

このプロパティを追加することもできます:

.tabs {
   white-space:normal;
}
于 2013-10-22T17:16:54.660 に答える