38

次の HTML を作成するルールを作成することは可能ですか。

<div style="width: 100%"></div>

&nbsp;CSSだけを使用して1行の高さの、またはコンテンツとして配置する必要がありますか?

4

6 に答える 6

40

いくつかの可能性:

  • の使用値heightに(またはmin-height) を設定します。line-height

    の初期値はline-heightでnormalあり、使用される値は実装に依存しますが、仕様1.0では ～ の間の数値が提案されています1.2

    私の場合 (winXP の場合は FF27 font-family: "times new roman")、その値は1.25であるため、 を使用できますheight: 1.25em。ただし、その値は他のフォントや実装によって異なる場合があります。

    line-height次に、などの値を手動で設定することをお勧めしますline-height: 1.25em。

    div {
  border: 1px solid red;
  min-height: 1.25em;
  line-height: 1.25;
}
    <div></div>

    これらのスタイルを要素にコンテンツがない場合にのみ設定する場合は、:empty疑似クラス を使用できます。

    div:empty {
  border: 1px solid red;
  height: 1.25em;
  line-height: 1.25;
}
    <div></div>

  • 要素にコンテンツを挿入します。

    たとえば、通常のスペースを追加して(または) に設定white-spaceすると、スペースが崩壊するのを防ぐことができます。pre-wrappre

    div {
  border: 1px solid red;
  white-space: pre-wrap;
}
    <div> </div>

    または、幅ゼロのスペース( &#8203;)を使用することもできます。

    div { border: 1px solid red; }
    <div>​&lt;/div><!-- There is a zero-width space inside -->

    あなたが言うように、&nbsp;また動作します。ただし、非改行スペースなので、自動改行を防ぐ目的があります。次に、それを使用すると、意味的に正しくない IMO になります。

    @BoltClockが言うように、これらの空白は CSS 疑似要素で挿入できますが、非常に古いブラウザーでは機能しない可能性があることに注意してください。

于 2013-10-13T17:24:26.597 に答える
18

別の解決策：

.your-selector:empty::after {
    content: ".";
    visibility: hidden;
}
于 2015-10-23T09:26:04.883 に答える
18

要素の計算された行の高さに対応する CSS 単位がないため、これは単一行の高さの定義に依存します。

line-heightこの要素の正確な値がわかっている場合は、明示的heightに同じ値に設定できます。しかし、あなたの質問を考えると、そうではない可能性が高いです。

フォント サイズ に対応する単位がありemます。これは、1 行の高さが計算されたフォント サイズと等しい場合に使用できます。

<div style="width: 100%; height: 1em"></div>

それ以外の場合は、何らかのフィラー コンテンツを挿入する必要があります。を投げて、それで&nbsp;完了することができます：

<div style="width: 100%">&nbsp;</div>

または、疑似要素を使用して CSS ルールを記述することで少しやり過ぎになりますが、何らかの方法でこの要素をターゲットにできる必要があります。

div::before { content: '\00a0'; }

要素にコンテンツがある場合とない場合があるが、最小の高さを持たせたい場合は、

  • 代わりに使用するmin-height場所を使用するか、またはheight

  • div:empty::beforeコンテンツがある場合にフィラーが挿入されないように疑似要素を使用する場合は、代わりに選択します。

于 2013-10-13T17:23:13.187 に答える
12

の解決策visibility: hidden;は賢いです。feffコンテンツをバイトオーダーマークであるUnicode 文字に設定する方が簡単です。これには幅はありませんが、高さがあります。IE6 までさかのぼるすべてのブラウザーで同じように動作します。

.your-selector:empty::before {
    content: '\feff';
}

WebKit (少なくとも Mac OS では) は、一部のフォントの通常のテキストよりも太字のテキストにわずかに異なる (1 ピクセル) 行の高さを適用することがわかりました。均一性を強制するには (この場合、空でないセレクターにも適用する必要があります):

.your-selector::before {
    content: '\feff';
    font-weight: 900;
}
于 2017-03-29T19:27:08.780 に答える
0

私が抱えていた問題は、通常の行と同じサイズの空の行が必要な jQuery ターミナルにありました。固定の行の高さを使用すると行間にギャップがあり、フォントサイズ + 行の高さのレイアウトについて報告した Firefox のバグがあったため、他の解決策には問題がありました。

これまでの最善の解決策は次のとおりです。

div::before {
    content: '\0200B';
    float: left;
    display: block;
}

コードに行の高さ/最小の高さがなく、完全に機能します。また、line-height を使用しない場合でも、ギャップのない見栄えの良いスタイル選択が可能です。

于 2020-07-23T14:09:46.490 に答える