Ocultar texto con CSS es uno de las cosas que hay que hacer en casi todas las webs. La solución ha sido desde hace años desplazar el texto muy lejos usando text-indent para que «salga del cuadro» y quede fuera de la región visible de la ventana del navegador. Leo que esta solución clásica es ineficiente ya que crea una web de más de 10.000 píxeles de ancho que el navegador tiene que cargar: más píxeles, más tiempo de carga.
Hay otra solución que no influye en la carga de la página:
.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
A partir de la solución estándar, se pueden añadir unas reglas para que el contenedor del texto, además de no mostrar el texto, no ocupe:
.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
width: 0;
height: 0;
}