¿Cómo puedo usar un retorno de carro en un HTML descripción?
https://stackoverflow.com/questions/358874
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Actualmente estoy agregando detallado de la información sobre herramientas a nuestro sitio, y me gustaría (sin tener que recurrir a un whiz-bang plugin de jQuery, sé que hay muchos!) el uso de retornos de carro para el formato de la descripción.
Para agregar la punta estoy usando el title atributo.He mirado en los sitios habituales y el uso de la plantilla básica de:
<a title='Tool?Tip?On?New?Line'>link with tip</a>
He intentado sustituir el ? con:
<br />&013; / \r\nEnvironment.NewLine(Estoy usando C#)
Ninguna de las anteriores obras.Es posible?
Solución
Es tan simple que vas a patear ... sólo tiene que pulsar entrar!
<a title='Tool
Tip
On
New
Line'>link with tip</a>
Firefox no mostrará varias líneas de información sobre herramientas en absoluto, aunque -. Reemplazará los saltos de línea sin nada
Otros consejos
El última especificación permite carácter de avance de línea, por lo que un simple salto de línea dentro del atributo o entidad (tenga en cuenta que los caracteres # y ; se requiere) están bien.
Trate de carácter 10. No funcionará en Firefox sin embargo. : (
Aparece el texto (en su caso) en una de manera dependiente del navegador. Pequeña información sobre herramientas funcionan en la mayoría de los navegadores. Largo información sobre herramientas y rompiendo la línea de trabajo en el IE y Safari (uso
o para una nueva nueva línea). Firefox y Opera no lo hacen nuevas líneas de apoyo. Firefox no lo hace apoyo a largo información sobre herramientas.
http://modp.com/wiki/ htmltitletooltips
Actualización:
A partir de enero el año 2015 Firefox no admite el uso de title para insertar un salto de línea en un <=> atributo HTML. Vea el ejemplo siguiente fragmento de código.
<a href="#" title="Line 1 Line 2 Line 3">Hover for multi-line title</a>
a prueba esta en IE, Chrome, Safari, Firefox (versiones más recientes 2012-11-27): Read
Funciona en todos ellos ...
También es importante mencionar, si está configurando el atributo título con Javascript como esto:
divElement.setAttribute("title", "Line one Line two");
No va a funcionar. Usted tiene que reemplazar ese decimal ASCII 10 a un hexadecimal ASCII A en la forma en que se escapó con Javascript. De esta manera:
divElement.setAttribute("title", "Line one\x0ALine two");
A partir de Firefox 12 que ahora son compatibles con saltos de línea utilizando la línea de alimentación entidad HTML:
<span title="First line Second line">Test</span>
Esto funciona en IE y es la correcta de acuerdo con la especificación HTML5 para la atributo de título .
Si está utilizando jQuery:
$(td).attr("title", "One \n Two \n Three");
va a funcionar.
probado en IE-9:. Trabajo
Como una contribución a la solución 
, también podemos utilizar 	 para las pestañas, si alguna vez tiene que hacer algo como esto.
<button title="My to-do list:
	-Item 2
	-Item 3
	-Item 4
		-Subitem 1">TEST</button>
Demostración
Sé que llego tarde a la fiesta, pero para aquellos que sólo quieren ver este trabajo, esto es una demostración: http://jsfiddle.net/rzea/vsp6840b/3/
HTML utilizado:
<a href="#" title="First Line
Second Line">Multiline Tooltip</a>
<br>
<br>
<a href="#" title="List:
• List item here
• Another list item here
• Aaaand another list item, lol">Unordered list tooltip</a>
funciona en todos los navegadores mayores (es decir, incluido)
Hemos tenido un requisito donde teníamos que probar todos ellos, esto es lo que deseo compartir
document.getElementById("tooltip").setAttribute("title", "Tool\x0ATip\x0AOn\x0ANew\x0ALine")<p title='Tool
Tip
On
New
Line'>Tooltip with <pre>
new
line</pre> Works in all browsers</p>
<hr/>
<p title="Tool Tip On New Line">Tooltip with <code>&#13;</code> Not works Firefox browsers</p>
<hr/>
<p title='Tool Tip On New Line'>Tooltip with <code>&#10;</code> Works in some browsers</p>
<hr/>
<p title='Tool
Tip
On
New
Line'>Tooltip with <code>&#xD;</code> May work in some browsers</p>
<hr/>
<p id='tooltip'>Tooltip with <code>document.getElementById("tooltip").setAttribute("title", "Tool\x0ATip\x0AOn\x0ANew\x0ALine")</code> May work in some browsers</p>
<hr/>
<p title="List:
• List item here
• Another list item here
• Aaaand another list item, lol">Tooltip with <code>• </code>Unordered list tooltip</p>
<hr/>
<p title='Tool\nTip\nOn\nNew\nLine'>Tooltip with <code>\n</code> May not work in modern browsers</p>
<hr/>
<p title='Tool\tTip\tOn\tNew\tLine'>Tooltip with <code>\t</code> May not work in modern browsers</p>
<hr/>
<p title='Tool
Tip
On
New
Line'>Tooltip with <code>&#013;</code> Works in most browsers</p>
<hr/>
No creo que es. Firefox 2 recorta títulos de los vínculos largos de todos modos y se debe en realidad sólo se utiliza para transportar una pequeña cantidad de texto de ayuda. Si necesita más explicación de texto que sugeriría que pertenece en un párrafo asociado con el enlace. A continuación, puede añadir la información sobre herramientas de código javascript para ocultar esos párrafos y mostrar como información sobre herramientas en vuelo estacionario. Esa es la mejor opción para conseguir que funcione a través del navegador de la OMI.

 <----- Este es el texto necesario para insertar carry.
En Chrome 16, y posiblemente versiones anteriores, puede utilizar "\ n". Como comentario, "\ t" también funciona
En cuanto a los que no trabajo que tiene que aplicar estilo al elemento en el que las líneas son visibles como: white-space: pre-line;
Referencia de esta respuesta: https://stackoverflow.com/a/17172412/1460591
Sólo tiene que utilizar esto:
<a title='Tool
Tip
On
New
Line'>link with tip</a>
Puede añadir nueva línea en el título mediante el uso de esta 
.
Sólo tiene que utilizar JavaScript. A continuación, compatible con la mayoría de los navegadores y de más edad. Utilizar la secuencia de escape \ n para la nueva línea.
document.getElementById("ElementID").title = 'First Line text \n Second line text'
A partir de la información disponible sobre la accesibilidad y el uso de información sobre herramientas haciéndolos más grandes con el uso de CR o salto de línea se aprecia, el hecho de que los distintos navegadores no puede / no estar de acuerdo en lo básico muestra que no importa mucho accesibilidad.
De acuerdo con el artículo en el sitio web del W3C :
CDATA es una secuencia de caracteres del juego de caracteres del documento y puede incluir entidades de caracteres. Los agentes de usuario deberían interpretar atributo valores como sigue:
- Reemplazar entidades de caracteres con caracteres,
- alimenta Ignorar línea,
- Reemplazar cada retorno de carro o pestaña con un solo espacio.
Esto significa que (al menos) CR y LF no funcionarán dentro de atributo de título. Le sugiero que utilice un plugin información sobre herramientas. La mayoría de estos complementos permitir HTML arbitrario que se mostrará como una sugerencia de un elemento.
Este 
 debería funcionar si usted sólo tiene que utilizar un simple atributo de título.
en bootstrap popovers, sólo tiene que utilizar data-html="true" y el uso de html en el data-content atributo .
<div title="Hello 
World">hover here</div>mucho mejores que buscan información sobre herramientas se pueden crear manualmente, y pueden incluir formato HTML.
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
<body style="text-align:center;">
<h2>Tooltip</h2>
<p>Move the mouse <a href="#" title="some text
more and then some">over</a> the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text
some <b>more</b><br/>
<i>and</i> more</span>
</div>
<div class="tooltip">Each tooltip is independent
<span class="tooltiptext">Other tooltip text
some more<br/>
and more</span>
</div>
</body>
</html>
Esto se toma de los w3schools poste en esto. con el siguiente código aquí .
La Sintaxis De Afeitar
En el caso de ASP.NET MVC sólo puede almacenar el título como una variable, como el uso de \r\n y va a trabajar.
@{
var logTooltip = "Sunday\r\nMonday\r\netc.";
}
<h3 title="@logTooltip">Logs</h3>
piratear pero funciona - (probado en cromo y móvil)
sólo tiene que añadir ningún espacio de descanso hasta que se rompa - puede que tenga que limitar el tamaño información sobre herramientas en función de la cantidad de contenido, pero para los mensajes de texto pequeños que esto funciona:
etc
intentado todo arriba y esto es lo único que trabajó para mí -
uso data-html="true" y aplicar <br>.
