0

段落全体または divの行の高さを厳密に強制する方法はありますか?

私は書籍のタイポグラフィーの正確な印刷に HTML+CSS を使用しています。行の内側に何があっても、各行の高さを実際に同じにしたいと考えています。

一般的な問題は、上付き文字またはテキストの拡大部分に関するものであり、SO に関する他のいくつかの質問で (多かれ少なかれ成功裏に) 対処されています。

ただし、これらのソリューションの問題は、それらが部分的であり、特定のケースのみを修正することです。特定の問題を修正したいのではなく、これらの問題がまったく発生しないようにしたいのです。テキスト全体にどのような種類の要素が表示されるかを事前に確認することはできないため、行が同じままであることを確認し、代わりに、問題が発生した場合に行を伸ばす必要がある特定のケースを修正したいと考えています。いくつかの要素。

したがって、以前の「ソリューション」の問題、特に:

  1. <sup>タグ ソリューションは、正しくなるまで、いくつかのサイズで手動で再生する必要があります。
  2. 2 番目のスレッドは実際には問題を解決しません。テキストの一部が十分に大きくなるとdisplay:inline-block;、overflow:hidden;との組み合わせでは対応できなくvertical-align:top;なり、最終的には線が伸びてしまいます。

私が試したこと：

要するに、この JSFiddleを参照してください。

これらの CSS ルールのすべての組み合わせを適用してみました。

  • display: inline-block;（または単にinline）
  • overflow: hidden;
  • vertical-align: top;
  • line-height: 1px;

ただし、テキスト サイズを十分に大きくしても、線が大きくなります。また、画像を追加すると (たとえば、通常の線の高さより 1 ピクセルだけ高いグラフィカルなスマイリー)、線が再び大きくなります。

私が欲しいもの：

  1. 理想的には、これらの問題がまったく発生しないことを確認するソリューションが必要です。上/下または両側の大きな要素をトリミングしてもかまいません。
  2. （1）が不可能な場合は、少なくとも、これが発生する各行を強調表示して明確に確認する方法が必要です. 言い換えれば、行が 1 ピクセルだけ高くなれば、テキストをざっと目を通しただけでも注意を引く必要があります。
4

0 に答える 0