Como desplazar la primera línea de texto de un elemento y sus posibles utilidades
Eva pertenece al área de desarrollo web de la compañía MnSoft como desarrollador senior de ésta. Su experiencia en maquetación web con CSS y XHTML le permite participar en el diseño y maquetación de grandes proyectos. Su capacidad para optimizar recursos en complejos diseños es extraordinaria.
En algunas ocasiones nos hemos encontrado con la necesidad de desplazar la primera línea de texto de un determinado elemento.
1) Primer ejemplo:
Imaginar que se tiene una lista de elementos <li>Elemento</li> a la que
se le quiere otorgar un margen izquierdo padding-left:20px; y colocar una viñeta al principio de línea,
por ejemplo: •
Si yo quiero que todo el texto quede alineado a la derecha de dicha viñeta,
le asigno al elemento <li> la
propiedad
text-indent:-15px; para que la primera linea se desplace
a la izquierda 15px menos que el resto de líneas.
En la imagen se muestra el resultado buscado:
2) Segundo ejemplo:
En otras ocasiones necesitamos que un elemento posea en su contenido un texto, y nos interesa que dicho texto sea indexado por los buscadores pero no queremos que sea visible en la web y sin hacer uso de prácticas SEO no recomendadas.
Un ejemplo claro sería el de tener un enlace <a href="url" >Nombre de la empresa</a> y que
su fondo sea el logotipo de la empresa y el texto del interior del enlace no sea visible.
Pués bien si en nuestro
CSS
declaramos en el selector del enlace la
propiedad
text-indent:-9999px; haremos que el texto que posee
el enlace no se visualice en web y por el contrario si se encuentre en nuestro código fuente.
En la imagen se muestra el resultado buscado:
Si consideras esta página útil, puedes poner un enlace a ella. Solo hay que copiar el texto del recuadro gris y pegarlo en tu web.
Así se mostrará en enlace : Duplicado del margen ("padding") de un "DIV" en Internet Explorer 6