0

私のウェブサイトの最初の単語のメインテキストは、他の単語よりもかなり大きなフォントサイズを持っています。何らかの理由で、テキストを含むコンテナが最初の単語を上から切り取ります。おそらく、最初の単語の行の高さが残りのテキストと同じであるため、コンテナが自身の高さを正しく計算できないためです。

Codepenスニペット：http ：//codepen.io/sardasht/pen/maJup （適切にデバッグできるように、cssファイルの全内容を含めたので、ここに埋め込みません。これが要求された場合は、投稿を編集して含めてください。ただし、最大300行のテキストになります）

最初の単語の行の高さを増やすと、同じ行にある残りのテキストは同じ行の高さになるため、下の残りのテキストからジャンプします。コンテナ要素にmargin-topを追加すると、最初の単語は切り取られなくなりますが、テキストの一番下の行が切り取られます。

私はオーバーフローで遊んだ：すべての親要素でも表示/非表示になっているが、役に立たなかった。

4

2 に答える 2

2

p要素には があり、line-height: 1.5em内部のテキスト行の高さを設定します。単位のためem、高さはフォントサイズに基づいて決定され、p使用される要素に設定されたフォントサイズであるため、子要素に設定されたフォントサイズが大きいために行の高さが増加することはありません.

于 2012-10-29T01:18:13.563 に答える
1

px または ems で設定されていない line-height 宣言を使用してみます。

p, span { line-height:1 }

私も試しました

span { line-height:0.8 }

トップの「プッシュ」が最も少ないように見えましたが、Mac の FF でのみ表示しました。

フォントの高さと幅がブラウザーによって異なることに気付きました。これは、適切な行送り、カーニングなどが与えられていないフォントで悪化する可能性があります。これにより、「奇妙な」改行が発生し、設定されたブロックの高さに「問題」が発生する可能性があります。特に FF から Chrome から IE に移行する場合. ふぅ。

編集: http://jsfiddle.net/mvf6j/

(子の) line-height を 1 に設定すると、親の line-height の 100% に等しくなります。したがって、あなたのコード例では 1 = 1.5em です。私のフィドル/例では、1 = 1em (子が 2em フォントであっても) です。継承です。これにより、子は親に対して相対的になります。親のサイズを変更したい場合は、推測作業を行います。明示的な行の高さを子に設定すると、サイジング/関係の容易さはすべて失われます。

于 2012-10-29T01:31:34.727 に答える