1

HTMLで簡単な「ギャップを埋める」演習があります。次のようなギャップがあります。

地球に最も近い星は_ _ _ _です。

ギャップはコンピューター上で埋めることができないと想定されています-ドキュメントはギャップが空の状態で印刷されることになっています。でも内容があるので、怒鳴ると答えがチェックされることがあります。
隙間を作るには、border-bottom プロパティを使用します。隙間が埋められたテキストがありますが、それは白いため、ユーザーはホバーしたときにのみ見ることができます。

CSS:

span.gap {
    color: white;
    border-bottom: 1px solid black;
}
span.gap:hover {
    color: gray;

}

HTML:

Stephen Hawking is famous for his research of <span class="gap">black holes</span>.
Stackoverflow only helps you if you ask <span class="gap">simple questions</span>.

ブラウザは色を白から黒に固定しているように見えるため、印刷されたドキュメントにギャップの内容が表示されます。その場合、テキストを非表示にするにはどうすればよいですか？境界線を表示する必要があるため、プロパティを
使用できません。visibility

4

2 に答える 2

0

CSS メディア タイプを使用して、さまざまなディスプレイ/メディアの状況を処理できます。つまり、次のようなものを CSS に追加します。

@media print { .gap { /* add your styles */ }}

また、これと組み合わせて、span印刷用にのみ表示されるセパレートを追加できます。お気に入り：

HTML:

Stackoverflow only helps you if you ask 
<span class="gap">simple questions</span>
<span class="print-gap"></span>.

CSS:

span.gap, span.print-gap {
    color: white;
    border-bottom: 1px solid black;
}
span.gap:hover {
    color: gray;
}
@media screen {
    span.print-gap { display: none; }
}
@media print { 
    span.gap { display: none; } 
    span.print-gap { display: inline-block; width: 100px; }
}
于 2013-04-08T20:21:05.317 に答える
0

すべての画像置換技術のうち、追加の要素を追加せずに機能するものがいくつかあります。それらはすべて、インラインに表示する場合は、スパンに幅を設定する必要があります。

http://jsfiddle.net/TZD84/

span.gap {
    display: inline-block;
    width: 8em;
    white-space: pre;
    overflow: hidden;
    border-bottom: 1px solid black;
    text-indent: 110%;
}

span.gap:hover {
    color: gray;
    text-indent: 0;
}

古いブラウザーをサポートする必要がある場合は、常に負のテキスト インデント メソッドがあります。

http://jsfiddle.net/TZD84/1/

span.gap {
    display: inline-block;
    width: 8em;
    overflow: hidden;
    border-bottom: 1px solid black;
    text-indent: -10em;
}

span.gap:hover {
    color: gray;
    text-indent: 0;
}
于 2013-04-08T21:19:47.053 に答える