Warum funktioniert der CSS-Texteinzug nicht?

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

Nur das erste Wort verborgen ist, wenn ich eine sehr große Anzahl an text-indent (text-indent: 999px;) zuweisen. In diesem Fall sollten alle Wörter ausgeblendet werden, weil The text-indent property specifies the indentation of the first line in a text-block.

Ich versuche nicht, den gesamten Text zu verbergen. Ich kenne die Text-Einzug-Bild-Ersetzungsmethode. Ich bin nur neugierig, warum der Code nicht richtig funktioniert.

Answer 1

Dies passiert, weil Ihr div 200px Breite ist. Die Einrückung bremst nicht und bis zum ersten Leerzeichen wird die Zeichenfolge als ein langes Wort behandelt. Nach dem Leerzeichen erscheint der Text in der Box - in der zweiten Zeile.

Sie können beweisen, dass ich Recht habe, indem Sie while-space: nowrap hinzufügen, damit der Text nicht bricht.

Answer 2

Sie können einen negativen Wert auf text-indent setzen alle

Like this Ihren Text

text-indent: -999px; 

Answer 3

ich denke, zu verbergen, weil in der Fiddle Sie die Eltern setzen

.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

alle Wörter sollten

Verwendung 150px und Sie sollten sehen, warum nur das erste Wort versteckt ist versteckt werden.

Bei 999px ist die erste Zeile eingerückt, was Sie sehen, ist der zweite.

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>

Der Texteinrückung fügt hinzu, dass viel Pixel an den Start der Linie und Wraps Text zum nächsten Zeilen, das ist das, was in Ihrem Fall geschieht. Es drückt das Starten des Textes auf 999px. Der Text, den Sie sehen, wird danach tatsächlich in Zeilen verschoben.

Wenn Sie es wollen, aus dem Bildschirm Verwendung negativer Einzug bewegen, die die Zeile beginnen, die viel Pixel auf der linken Seite und Text auf magische Weise verschwindet, wie es auf der linken Seite so viel Pixel beginnt und müssen Reise so viel vor es muss in die nächste Zeile springen, bevor es auf die rechte Seitenkante trifft.

Sie können auch das Umbrechen von Text + Überlauf als mit css verdeckt deaktivieren, um den gewünschten Effekt zu erzielen.