CSSのテキストインデントが機能しないのはなぜですか？

Question

.logo { 
 
    display: block; 
 
    width: 200px; 
 
    height: 100px; 
 
    margin: auto; 
 
    text-indent: 999px; 
 
    font-size: 14px; 
 
    font-weight: 500; 
 
    color: #F44336; 
 
    }

<h1 class="logo">This is a title </h1>

screenshot

Iはtext-indent（text-indent: 999px;）に非常に大きな番号を割り当てる場合にのみ最初の単語は隠されています。 この場合、すべての単語を非表示にする必要があります。The text-indent property specifies the indentation of the first line in a text-block.

すべてのテキストを非表示にしようとしていません。私はtext-indent-image-replacementメソッドを知っています。なぜコードが正しく動作しないのか不思議です。

Answer 1

これは、divの幅が200ピクセルであるために発生します。インデントはブレーキをかけることなく、最初のスペースが見つかるまで文字列は1つの長い単語として扱われます。テキストのスペース残りがボックスに表示された後 - 2行目。

私は空白：nowrapを追加することで正しいことを証明できます。したがって、テキストは壊れません。

Answer 2

あなたはすべてのあなたのテキスト

Like this

text-indent: -999px; 

Answer 3

を非表示にするtext-indentに負の値を置くことができ、私はフィドルにあなたが親

.parent-dev h1{ 
 
    text-indent:-999999em; 
 
    background:url('images/thing.png'); 
 
}

<div class="parent-dev"> 
 
<h1>Look at me, I am text.Look at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am texLook at me, I am tex</h1> 
 
</div>

を入れているためだと思います

Answer 4

すべての単語は

使用150ピクセルを非表示にする必要があり、最初の単語だけが隠されているなぜあなたが表示されるはずです。

999pxでは、最初の行がインデントされ、2番目の行がインデントされます。

Answer 5

.logo { 
 
    display: block; 
 
    width: 200px; 
 
    height: 100px; 
 
    margin: auto; 
 
    text-indent: 999px; 
 
    font-size: 14px; 
 
    font-weight: 500; 
 
    color: blue; 
 
    background: red; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
}

<h1 class="logo">This is a title </h1>

テキストインデントが次の行にラインとラップテキストの開始にそれほどピクセルを追加し、それはあなたのケースで起こっていることです。テキストの開始を999pxにプッシュします。表示されたテキストは、実際にこの後に行にプッシュされます。

もしあなたが画面外に移動したいのであれば、左に多くのピクセルを開始し、テキストが魔法のように消えるラインを開始する負のインデントを使用してください。旅行右サイドエッジを叩く前に次のラインに壊れなければならない。

また、希望の効果を得るには、CSSの隠しテキスト+オーバーフローのラッピングを無効にすることもできます。