4

アンカーを画像に置き換え、その画像をアンカーの背景にするとします。アクセシビリティの理由から、アンカーでラップされたテキストをそこに残したいのですが、表示したくないのです。よく知られている手法は、text-indent：-9999px;のようなものを使用することです。オーバーフローとともに：非表示。

では、アンカーボックスが50px x 50pxだとしましょう。なぜ、text-indent：50pxを実行しないのでしょうか。これにより、テキストがどれだけ長くなっても、アンカーの隠れたオーバーフローにテキストが押し込まれます。

4

1 に答える 1

0

さて、あなたがそれをしたときに何が起こるかを見てみましょう

http://jsfiddle.net/C29Ma/

<div class="image">Hide me please</div>

div.image {
    width: 50px;
    height: 50px;
    background: url(http://placehold.it/50x50) no-repeat;
    text-indent: 50px;
}

テキストの幅が50ピクセルを超えるため、折り返されます。最初の行だけが50pxでインデントされます。

ネガティブインデント手法は、疑似要素やワードラップの制御が広くサポートされる前に生まれました。それは十分に仕事をするので、人々は新しい/より良い方法がやってきたときに彼らが物事を行う方法を変えません。

あなたの提案は現代の技術の1つに非常に近いですが

http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

.hide-text {
     text-indent: 100%;
     white-space: nowrap;
     overflow: hidden;
 }
于 2013-02-19T16:44:35.230 に答える