css - 「text-indent」を使用してテキストを非表示にする

Question

<li>を設定して、CSS を使用して要素内のテキストを非表示にしようとしていますtext-indent: -999px;。ドキュメントの方向を(右から左 - 私のサイトはヘブライ語です)
に設定すると、何らかの理由でこれが機能しません。方向が「rtl」の場合、テキストは引き続き表示されます... 理由とこれを回避する方法を知っている人はいますか?"rtl"

score 12 · Accepted Answer

direction:ltrマイナスにしようとしている要素を設定するのはどうtext-indentですか？

デモ: jsfiddle.net/Marcel/aJBnN/1/

score 2 · Accepted Answer

2

color: transparent;

また

font-size:0px;

于 2014-04-15T19:03:10.980 に答える

score 2 · Accepted Answer

テキストをインデントする方向に一致するように text-alignment を設定してみてください。

たとえば、LTR を使用していて、テキストを負にインデントしたい場合は、display: ブロックを追加するだけでなく、左揃えも追加する必要があります。

RTLについてはわかりませんが、積極的にインデントして右揃えを使用する必要があると思われます。

score 2 · Accepted Answer

テキストを透明色にするのが最善の方法であることがわかりました。

色: rgba(0,0,0,0);

注: このバグは、Firefox 12 にも存在します (rtl では text-indent 値は無視されます)。

score 1 · Accepted Answer

大きな値を指定する line-height を使用できます。たとえば、高さ 30 ピクセルのコンテナーの場合は 100 ピクセルです。

コンテナのサイズが制限されている場合にのみ機能します。高さがまだ設定されていない場合は、具体的に設定する必要があるかもしれません。

score 1 · Accepted Answer

私はこの解決策を好みます：

.hide_text { text-indent: 100%; white-space: nowrap; overflow: hidden; }

score 0 · Accepted Answer

これtext-indent: -99pxは古いトリックであり、テキストを非表示にする最適な方法ではありません。visibility:hidden代わりに使用しないのはなぜですか？

score 0 · Accepted Answer

0

テキスト整列: 右; 私のために働く

于 2013-08-13T05:53:12.017 に答える

score 0 · Accepted Answer

オーバーフローを非表示に追加すると、正常に機能します。

div{
    text-indent: 100%;
    overflow: hidden;
}

<div>
 search
 <input type="text">
 </div>

css - 「text-indent」を使用してテキストを非表示にする

11 に答える 11

Related

Reference