CSS-Text ausgeblendet

Tipps zum Ausblenden von CSS-Text: So verbergen Sie Text mithilfe von text-indent und clip-path

Im Webdesign müssen wir manchmal Text ausblenden, aber wir möchten display:none nicht verwenden, um ihn vollständig zu entfernen. Derzeit bietet CSS einige Techniken, um den Effekt des Ausblendens von Text zu erzielen. Die am häufigsten verwendeten Techniken sind Texteinzug und Clippfad.

1. text-indent

Das text-indent-Attribut kann den Text nach links oder rechts verschieben. Wenn es auf einen negativen Wert eingestellt ist, kann der Text außerhalb des Randes des Elements ausgeblendet werden. Zum Beispiel:

.hide {
    text-indent: -9999px;
}

Dieser Stil verschiebt den Text innerhalb des Elements außerhalb seiner linken Seite und erzielt so den verborgenen Effekt des Textes. Es ist jedoch zu beachten, dass diese Methode nur für eine Textzeile gilt und nicht das Ausblenden mehrerer Textzeilen bewältigen kann.

2. Clip-Pfad

Das Clip-Pfad-Attribut verwendet einen Beschneidungspfad, um den sichtbaren Teil von Bildern und Elementen auszuschneiden. Wir können den Text innerhalb eines Elements von außerhalb des Rechtecks ​​ausblenden, indem wir den Beschneidungspfad auf ein Rechteck festlegen. Zum Beispiel:

.hide {
   clip-path: inset(0 0 0 9999px);
}

Dieser Stil schneidet den Text innerhalb des Elements außerhalb der linken Seite auf 9999 Pixel zu, wodurch der verborgene Effekt des Texts erzielt wird. Im Vergleich zum Texteinzug kann die Clip-Pfad-Methode den Ausblendeffekt von mehrzeiligem Text bewältigen.

3. Vergleich von Texteinzug und Clippfad

Wir können Texteinzug und Clippfad vergleichen, um ihre Vor- und Nachteile besser zu verstehen.

1. Erzielen Sie Effekte

Texteinzug: Geeignet für versteckte Effekte einer Textzeile, kann nicht mit mehrzeiligem Text umgehen.

clip-path: Geeignet zum Ausblenden von Effekten von mehrzeiligem Text. Es ist flexibler als text-indent und kann komplexere Formen verarbeiten.

2. Schwierigkeit bei der Implementierung

Texteinzug: Ganz einfach, legen Sie einfach den negativen Wert von Texteinzug fest.

Clip-Pfad: Es ist relativ kompliziert, die Komplexität der Form zu berücksichtigen, wenn man den Beschneidungspfad einstellt. Es erfordert mehr Übung und Erfahrung.

3. Kompatibilität

text-indent: Die Kompatibilität ist sehr gut und wird von fast allen Browsern unterstützt.

Clip-Pfad: Die Kompatibilität ist relativ schlecht, einige Browser unterstützen sie nicht und zur Lösung müssen Kompatibilitätsverarbeitungsmethoden verwendet werden.

Zusammenfassend lässt sich sagen, dass Text-Einzug zum Ausblenden einer einfachen Textzeile geeignet ist, während Clip-Pfad flexibler ist und komplexere Formen verarbeiten kann, aber es erfordert mehr Übung und Erfahrung sowie Kompatibilitätsfragen.

4. Verwendungsszenarien

1. Wiederholten Text in Elementen ausblenden

Im Design müssen wir manchmal einen Teil des Textes innerhalb eines Elements ausblenden (z. B. wiederholte Titel oder Beschreibungstext), den wir aber nicht verwenden möchten display:none; entfernt es vollständig. Zu diesem Zeitpunkt kann die Verwendung von Texteinzug oder Clippfad unsere Anforderungen erfüllen.

.title {
    text-indent: -9999px;
}

2. Hover-Effekt erzielen

Manchmal müssen wir einen Hover-Effekt implementieren, um den Text in einem bestimmten Element auszublenden und ihn nur anzuzeigen, wenn die Maus hinein bewegt wird. Mit text-indent und clip-path können wir diesen Effekt leicht erzielen.

.btn {
    text-indent: -9999px;
}

.btn:hover {
    text-indent: 0;
}

.btn {
    clip-path: inset(0 0 0 9999px);
}

.btn:hover {
    clip-path: unset;
}

3. Formularbeschriftungstext ausblenden

Beim Formulardesign müssen wir manchmal den Text in der Beschriftung ausblenden und nur Platzhalter verwenden, um den Benutzer zur Eingabe aufzufordern. Zu diesem Zeitpunkt kann die Verwendung von Texteinzug oder Clippfad unsere Anforderungen erfüllen.

input[type="text"] + label {
    text-indent: -9999px;
}

input[type="text"] + label {
     clip-path: inset(0 0 0 9999px);
}

Zusammenfassung

Im Webdesign sind Texteinrückungs- und Clip-Path-Techniken sehr praktisch. Wir können sie verwenden, um Text in Elementen auszublenden, Hover-Effekte zu implementieren oder Text in Formularbeschriftungen usw. auszublenden. Sie sind nicht nur bequem zu bedienen, sondern auch gut kompatibel und ein unverzichtbarer Bestandteil der CSS-Kenntnisse.

Das obige ist der detaillierte Inhalt vonCSS-Text ausgeblendet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!