{ hide_text } Informe resumido de ocultación de texto CSS

{ hide_text } Informe resumido de ocultación de texto CSS

Una demostración de ocultación de texto CSS que compilé recientemente resumió varios métodos, con la esperanza de encontrar la solución más perfecta y ponerla en mis propios fragmentos de código. Sin embargo, al final caí en una situación en la que la conclusión fue anulada repetidamente. Debido a que hay tantos escenarios de aplicación y elementos que deben considerarse, independientemente del navegador, diferentes terminales de aplicación y diferentes estructuras de etiquetas tendrán diferentes soluciones óptimas. Por lo tanto, en lugar de esperar ser más "vagos" en el trabajo, es mejor. para consolidar y acumular conocimientos básicos como de costumbre, para que pueda ser más útil cuando necesite hacer concesiones.

Debido a que tengo poca experiencia, es inevitable que haya errores y omisiones en la parte de demostración. Si encuentra algún problema, espero que pueda señalarlo.

Demostración de la lista de métodos

1. Sin reservas: mostrar:ninguno

Fragmento de código:

(x) HTML

<p class="hide_display">Soy un texto de salsa de soja</p>

CSS

/* Ocultación de la violencia*/
.hide_display{display:none;}

compatibilidad:

ventaja:

• Cómodo y rápido
• Buena compatibilidad

defecto:

• El lector de pantalla no puede leer
• Los hipervínculos no son aplicables.
• El texto alternativo de la imagen requiere el fondo de otras etiquetas
• Impacto en las clasificaciones de búsqueda
• El uso extensivo puede considerarse fácilmente una trampa de SEO

2. Elección de compromiso: desbordamiento: oculto/posición: absoluta/visibilidad: oculto

Fragmento de código:

(x) HTML

<span class="hide_overflow">Soy el texto número uno sobre salsa de soja</span>
<p class="hide_position">Soy el texto número 2 en salsa de soja</p>
<p class="hide_visibility">Soy el texto número 3 en salsa de soja</p>

CSS

/* Ocultar el elemento y separarlo del flujo de texto para que el elemento no afecte a otros elementos */
.hide_overflow{
altura: 0px;
desbordamiento: oculto;
display:block;/* Se requieren elementos en línea*/
float:left; /* Salir del flujo de documentos o position:absolute;*/
}
/* Posición fuera del rango visible, fuera del flujo de texto, para que el elemento no afecte a otros elementos*/
.ocultar_posición{
posición:absoluta;
izquierda: -32767px;
}
/* El principio es el mismo que .hide_position*/
.hide_visibilidad{
visibilidad: oculta;
posición:absoluta; /* Salir del flujo de documentos*/
margen izquierdo: -32767px;
}