{ hide_text } Zusammenfassungsbericht zum Ausblenden von CSS-Text
Eine Demo zum Ausblenden von CSS- Texten, die ich kürzlich zusammengestellt habe, fasste mehrere Methoden zusammen, in der Hoffnung, die perfekteste Lösung zu finden und sie in meine eigenen Codefragmente einzubauen. Am Ende geriet ich jedoch in eine Situation, in der die Schlussfolgerung wiederholt aufgehoben wurde. Da es so viele Anwendungsszenarien und -elemente gibt, die unabhängig vom Browser berücksichtigt werden müssen, haben unterschiedliche Anwendungsterminals und unterschiedliche Tag-Strukturen unterschiedliche optimale Lösungen. Daher ist es besser, nicht zu hoffen, bei der Arbeit „fauler“ zu sein um das Grundwissen wie gewohnt zu festigen und zu akkumulieren, so dass Sie bei Kompromissen griffbereiter sein können.
Da ich wenig Erfahrung habe, ist es unvermeidlich, dass es im Demo-Teil Fehler und Auslassungen gibt. Wenn Sie irgendwelche Probleme finden, hoffe ich, dass Sie darauf hinweisen können.
Demo der Methodenliste
1. Ohne Reservierung: display:none
Codeausschnitt:
(x)HTML
<p class="hide_display">Ich bin ein Sojasaucen-Text</p>
CSS
/*Gewalt versteckt*/
.hide_display{display:none;}
Kompatibilität:
Vorteil:
Mangel:
2. Kompromissauswahl: overflow:hidden/position:absolute/visibility:hidden
Codeausschnitt:
(x)HTML
<span class="hide_overflow">Ich bin der Sojasaucentext Nr. 1</span>
<p class="hide_position">Ich bin Nr. 2 im Sojasaucen-Text</p>
<p class="hide_visibility">Ich bin Nr. 3 im Sojasaucen-Text</p>
CSS
/* Verstecke das Element und trenne es vom Textfluss, damit das Element keine Auswirkungen auf andere Elemente hat */
.hide_overflow{
Höhe:0px;
Überlauf:versteckt;
display:block;/* Inline-Elemente sind erforderlich*/
float:left; /* Verlassen Sie den Dokumentenfluss oder position:absolute;*/
}
/* Position außerhalb des sichtbaren Bereichs, außerhalb des Textflusses, sodass das Element keine Auswirkungen auf andere Elemente hat*/
.hide_position{
Position:absolut;
links:-32767px;
}
/* Das Prinzip ist das gleiche wie bei .hide_position*/
.hide_visibility{
Sichtbarkeit:versteckt;
position:absolute; /* Verlassen Sie den Dokumentenfluss*/
margin-left:-32767px;
}