¿Cómo puedo mostrar saltos de línea para un evento de desplazamiento usando el título en un elemento html simple? / ¿Cuál es el código adecuado a utilizar?
Estoy tratando de establecer el atributo de título de esta manera:
.setAttribute('title', 'line1 &#013; \<br />- /n \/n /r line2')..Eso no funciona. No se rompe por ningún lado.
--- Ejemplo de código ---
const box = document.querySelector('.box'); // set `id` attribute on element box.setAttribute('title', 'line1 
 <br />- /n \/n /r line2'); <div class="box" style="background-color: pink; width: 20px; height: 20px"> </div> <br><br> this works with "&#013;" <div style="background-color: blue; width: 20px; height: 20px" title="line1 
 <br />- /n \/n /r line2"> </div>Estabas cerca, pero usaste una barra en lugar de una barra invertida en \n . El código HTML, por otro lado, no se analizará, por lo que <br> o las entidades no funcionarán desde JavaScript.
Del estándar HTML :
Si el valor del atributo de título contiene U+000A caracteres de CAMBIO DE LÍNEA (LF), el contenido se divide en varias líneas. Cada carácter U+000A LINE FEED (LF) representa un salto de línea.
Según las secuencias de escape de JavaScript , \n se asigna a ese carácter.
También puede agregar caracteres Unicode a una cadena como esta:
box.setAttribute('title', "line1\u{000A}line2");Además, en lugar de usar una cadena normal como valor de atributo, puede usar una plantilla literal , que le permite agregar saltos de línea a la cadena:
box.setAttribute('title', `line1 line2`);Tenga cuidado con el siguiente comentario de la especificación HTML. No debe confiar en el atributo de título para proporcionar información que no se proporciona por otros medios.
Actualmente se desaconseja confiar en el atributo de título, ya que muchos agentes de usuario no exponen el atributo de manera accesible como lo requiere esta especificación (por ejemplo, requieren un dispositivo señalador como un mouse para que aparezca una información sobre herramientas, lo que excluye a los usuarios que solo usan teclado). y usuarios solo táctiles, como cualquier persona con un teléfono o tableta modernos).
// set by means of Unicode document.querySelector('.box1').setAttribute('title', "line1\u{000A}line2"); // set `title` attribute on element by means of template literal document.querySelector('.box2').setAttribute('title', `line1 line2`); // simple with \n document.querySelector('.box3').setAttribute('title', `line1\nline2`); <p class="box1" style="background-color: blue; width: 20px; height: 20px"></p> <p class="box2" style="background-color: pink; width: 20px; height: 20px"></p> <p class="box3" style="background-color: green; width: 20px; height: 20px"></p>