web-dev-qa-db-fra.com

Comment puis-je ajouter un nouveau caractère de ligne / saut de ligne dans l'attribut title en HTML

J'utilise ceci

<a href="#" title="select from 1: this 2: that" > Click here </a>

Quand quelqu'un passe dessus, je vois tout le texte sur une seule ligne.

Existe-t-il un moyen de l'afficher sur une nouvelle ligne?

17
user26

Vous pouvez utiliser &#013; ou &#10;.

<a href="#" title="select from 1: this &#013; 2: that" > Click here </a>


<a href="#" title="select from 1: this &#010; 2: that" > Click here </a>
28
skulled

Comme vous avez marqué cela avec l'accessibilité, je dirais que l'approche la plus robuste est de ne pas s'appuyer sur le titre pour obtenir des informations.

spécification HTML actuelle décourage cette utilisation en tant que personnes utilisant qui ne peuvent pas utiliser une souris (par exemple en raison d'une mobilité réduite) mais utilisez un clavier et voyez l'écran ne verra jamais votre info-bulle/texte de titre. Les personnes utilisant des écrans tactiles ne peuvent pas y accéder.

La plupart des personnes utilisant un lecteur d'écran ne connaîtront pas non plus le texte du titre, bien qu'il soit possible d'accéder à la plupart des lecteurs d'écran, il n'est pas lu par défaut, et quelqu'un devrait le savoir pour le rechercher. (Et il y a plus de problèmes .)

La spécification suggère d'utiliser ceci pour les sauts de ligne:

Si la valeur de l'attribut title contient des caractères "LF" (U + 000A), le contenu est divisé en plusieurs lignes. Chaque caractère "LF" (U + 000A) représente un saut de ligne.

Cependant, l'affichage des nouvelles lignes dépend du navigateur ( Comment puis-je utiliser un retour chariot dans une info-bulle HTML ).

Je soupçonne que l'approche globale de l'interface utilisateur nécessite un peu plus de réflexion, car beaucoup de gens seraient confus par le type d'instruction dans votre exemple, c'est-à-dire que fait-on en cliquant dessus s'il y a plusieurs options?

Si votre situation rend difficile écrire un bon texte de lien alors je publierais plus d'informations sur l'interaction à X stackexchange .

11
AlastairC

si vous le générez, mettez-le dynamiquement\n

$(td).attr("title", "One \n Two \n Three");
10
Gaurav
<a href="#" title="select from 
1: this 
2: that" > Click here </a>
5
vishalkin