2013-01-21 6 views
6

divと画像とテキストがあります。テキストが1行だけを占める場合、テキストを画像の中央に垂直に配置します。テキストが複数のテキスト行を占める場合は、テキストの上部をイメージの上部に揃えてください。CSS - コンテンツが新しい行にオーバーフローした場合に別のスタイルを適用する

CSSにテキストが次の行に折り返されたときを検出する方法はありますか?

+0

いいえ、cssはこうしたものを検出できません。それは単にスタイリング言語であり、意思決定の可能性はありません –

+0

@SvenBiederありがとう。それが私の考えです。私は答えとしてそれを受け入れることができるようにあなたの応答を投稿できますか? – Jon

+0

jQueryを使用すると、テキストの長さを数え、クラスを適用する条件を作成できます。これは1本/複数行に適していますが、CSSは次のようなことができます:if($( 'yourdiv')。text()。length <100){$(this).addClass( 'small')} else {....} –

答えて

5

いいえ、CSSはそのようなことを検出できません。それはスタイリング言語であり、意思決定の可能性はありません。

+2

desicionsを作る。 メディアクエリーと ':empty'は、ブラウザで何が起きているのかを判断するCSSの良い例です。一般的に、すべての疑似クラスはCSSの決定を下すものです。 https://developer.mozilla.org/de/docs/Web/CSS/Pseudo-classes 疑似クラスを追加することをお勧めします。 ':single-line'や' :テキストラップ 'いつか。 – ProblemsOfSumit

2

いいえ、これはできません。ただし、単語が「折り返し」または次の行に移動するのを防ぐことは可能です。この機能はすべてのブラウザで完全にサポートされているわけではありません。これはword-wrapと呼ばれます。

+0

テキストを折り返す必要がありますが、代替ソリューションを提供していただきありがとうございます。 – Jon

関連する問題