2016-04-18 6 views
3

フォントサイズとウィンドウ幅を扱うのに少し質問があります。時々、私のヘッダーはただ一つの長い言葉に過ぎず、小さなデバイスではこの言葉は画面から落ちているので、あなたは単語の小さな部分しか見ることができません。どのようにしてテキストが画面に落ちないようにするにはどうすればいいですか?

どの画面でも一言一言を必ず確認できますか?

私はいくつかのCSSソリューションを試しましたが、単語が分割されて次のルールに進みます。

ありがとうございます!

+0

「vw」 - ビューポート幅の単位を使用してみてください。 – agdhruv

+0

スクリーンの落下はどういう意味ですか?テキストが次の行に行くことを意味しますか? –

+0

私はあなたがこのプロパティを使うことができると思います:word-wrap:break-word; – Jainam

答えて

1

を参照してください

異なるメディアデバイスの画面サイズについての詳細はここに行くことができます他の理由から、これを正確に行う jQuery-quickfitプラグインを簡単に使用することができます。

+0

ありがとう!これはすべてのシナリオで非常に簡単で安全です。私はこれが私が使用しようとしている解決策だと思います。 –

1

メディアクエリを使用して、テキストサイズをさまざまな画面サイズに合わせることができます。

+0

こんにちは!あなたの答えをありがとうが、私はヘッダーの長さを "知らない"ので、それはテキストが画面から落ちることはありませんので、可変でなければなりません。 –

3

フォントサイズが画面の幅に依存するようにするには、メディアクエリで簡単に行うことができます。

デモをご覧ください。

h1 { 
 
    font-size: 0.68em; 
 
} 
 
@media screen and (min-width: 768px) { 
 
    h1 { 
 
    font-size: 0.87em; 
 
    } 
 
} 
 
@media screen and (min-width: 992px) { 
 
    h1 { 
 
    font-size: 1em; 
 
    } 
 
} 
 
@media screen and (min-width: 1200px) { 
 
    h1 { 
 
    font-size: 1.5em; 
 
    } 
 
} 
 
    
 
<h1>How can I make sure text never is falling of the screen This is a long header</h1>

また、あなたが本当に柔軟なソリューションを求めており、すでにのためのjQueryを使用している場合link

+0

ありがとう!非常に興味深い、私はCSSのソリューションを期待していませんでした。 「em」は実際にはどういう意味ですか? –

+0

emは大文字のM文字の幅を意味し、同じエフェクトでpx/ptやその他の単位でサイズを変更することができます – KWeiss

+1

[cssでスタイルを定義するときにpxの代わりにemを使用する理由](http:// stackoverflow。 com/questions/609517/why-em-pxの代わりに) –

関連する問題