Insertar saltos de linea en ALT y TITLE

En todo el tiempo que llevo tocando HTML, nunca había tenido la necesidad de insertar saltos de carro en los atributos ALT y TITLE.

Tras probar lo evidente: <br>, \n, he visto que con un retorno de carro físico, la cosa funcionaba. Aunque claro, con algunos problemas en cuanto a validación.

En conclusión, de estas formas no funciona:
<a href="#" title="Linea 1<br>Linea 2">Enlace</a>
<a href="#" title="Linea 1\nLinea 2">Enlace</a>

Y de esta forma, a veces da problemas de validación:
<a href="#" title="Linea 1
Linea 2">Enlace</a>

Finalmente he encontrado la clave. Consiste en insertar el carácter ASCII 13 (Carriage Return -CR-). La cosa quedaría así:
<a href="#" title="Linea 1&#13;Linea 2">Enlace</a>

Que se muestra en pantalla así:
Enlace

17 comentarios en “Insertar saltos de linea en ALT y TITLE”

  1. En Mozilla Firefox 2.0.0.2 para Windows, al menos no funciona, aparece seguidamente, con un espacio: "Linea 1 Linea 2".

  2. Javier Gutiérrez Chamorro (Guti)

    Droiker, con Opera ocurre los mismo. Parece que no pueden renderizar tooltips con retornos de carro.

  3. Javier Gutiérrez Chamorro (Guti)

    Como se ha comentado Yops, ni Firefox ni Opera son capaces de mostrar tooltips multilinea, entiendo que como usas Firefox 1.5, tu mensaje de que no funciona va en esa linea.

    Respecto a la validación, estoy seguro que ya sabrás, que llevamos bastante tienmpo trabajando para que el código de Simple PHP Blog sea XHTML 1.0 compliant.

  4. Más allá de los años, este sitio fue el primero que pillé en Google para asignar saltos de línea en los “title / alt”, y tal como se comenta, se mantienen problemas en Firefox 10.0.2, pero en Internet Explorer como Google Chrome, sin complicaciones.

    Pareciera que los “capos” de FFox aún están al debe…

    PD: ¿Cómo será en SAFARI?

  5. Javier Gutiérrez Chamorro (Guti)

    Me alegra que este fuera el primer sitio donde lo encontraras Claudio Gonzalez, y que casi 6 años después, que en tecnología es muchísimo, siga totalmente vigente.

    Gracias por tu comentario.

  6. Javier Gutiérrez Chamorro (Guti)

    Gracias por la confirmación zarmapas. Sorprende que 6 años después, este truquito siga funcionando, y esté tan poco documentado.

    Si pudieras confirmarnos en que navegadores recientes te ha funcionado, sería de gran utilidad.

  7. Excelente. Me ha salvado la vida.
    Ahora busco la lista completa para ver como personalizar más los tooltips.

  8. Javier Gutiérrez Chamorro (Guti)

    Un placer Shadower. Los tooltips son de sistema, por lo que su apariencia depende solamente de como lo gestione la plataforma y en ese sentido no son personalizables.

    Si puedes en cambio implementar los tuyos propios, y evitar usar el ALT de sistema.

  9. perdon al ponerlo el caracter no aparecio.
    me referia a que probaras con “& # 1 0 ;” (sin espacios ni commillas)

  10. Javier Gutiérrez Chamorro (Guti)

    A priori debería funcionar mejor con el 13 (CR), en vez de con el 10 (LF), sin embargo en las pruebas que he hecho, el 10 también da resultado.

    Gracias por el aporte Nandordena.

  11. Javier Gutiérrez Chamorro (Guti)

    Me satisface mucho Cristian. Son 7 años ya desde el artículo original, y en las últimas versiones de navegadores sigue funcionando. Gracias por tu confirmación.

    Sorprende lo poco documentado que está este truco, cuando por otro lado, el insertar retornos de carro en un ALT o un TITLE, es una necesidad más o menos habitual en cuanto a accesibilidad web.

Deja un comentario