web-dev-qa-db-ja.com

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

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

cssright-to-lefttext-indent
12
Crippletoe

text-indent: -9999pxと一緒にdisplay: block;を使用してみてください。それは私のために解決しました。

さらに、li要素を水平方向にフロートさせる必要がある場合（水平方向のメニューなど）、float: left;を使用します。

18
kaustavdm

負のdirection:ltrを与えようとしている要素にtext-indentを設定するのはどうですか？

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

12
Marcel
color: transparent;

または

font-size:0px;
2
Holy Moses

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

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

RTLについてはよくわかりませんが、論理的には、確実にインデントして正しい配置を使用する必要があります。

2
dizarter

最良の方法は、テキストを透明色にすることです。

色：rgba（0,0,0,0）;

注：このバグはFirefox 12にまだ存在します（テキストインデント値はrtlでは無視されます）

2
George Filippakos

私の問題はtext-alignにありました。要素またはそれを左に折り返す親要素の整列モードを変更する場合は、text-indentに負のインデックスを指定する必要があります。それ以外の場合は、正の値を指定する必要があります。

.case1{text-indent:-999px;text-align:left;overflow:hidden;display:block}

さもないと

.case2{text-indent:999px;text-align:right;overflow:hidden;display:block}
2
HasanG

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

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

1
Andrezero

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

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

text-align：right;私のために働く

0
Ahmad Ajmi

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

0
Tomer Cohen