Come posso usare un ritorno a capo in un suggerimento HTML?
https://stackoverflow.com/questions/358874
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Al momento sto aggiungendo tooltip verbose al nostro sito, e mi piacerebbe (senza dover ricorrere a un mago-bang plugin jQuery, so che ci sono molti!) Da utilizzare ritorni a capo per formattare il tooltip.
Per aggiungere la punta Sto utilizzando la title attributo. Ho guardato intorno ai soliti siti e utilizzando il modello di base di:
<a title='Tool?Tip?On?New?Line'>link with tip</a>
Ho provato a sostituire il ? con:
-
<br /> -
&013; / -
\r\n -
Environment.NewLine(sto usando C #)
Nessuno dei lavori di cui sopra. E 'possibile?
Soluzione
E 'così semplice che si prenderà a calci da soli ... basta premere invio!
<a title='Tool
Tip
On
New
Line'>link with tip</a>
Firefox non visualizza più righe tooltip a tutti anche se -. Sostituirà le nuove righe con niente
Altri suggerimenti
Il ultima specifica permette carattere di avanzamento riga, quindi un semplice interruzione di linea all'interno dell'attributo o entità (si noti che i caratteri # e ; sono obbligatori) sono OK.
Prova di carattere 10. Non funzionerà in Firefox però. : (
Il testo viene visualizzato (se non del tutto) in una del browser maniera dipendente. Piccolo tooltip funzionare sulla maggior parte dei browser. Lungo i suggerimenti e la linea di rottura lavoro in IE e Safari (uso
o per un nuova nuova riga). Firefox e Opera non lo fanno a capo di supporto. Firefox non lo fa sostenere a lungo le descrizioni dei comandi.
http://modp.com/wiki/ htmltitletooltips
Aggiornamento:
A partire dal gennaio 2015 Firefox non supporta l'utilizzo di title per inserire un'interruzione di riga in un HTML <=> attributo. Vedere l'esempio frammento di seguito.
<a href="#" title="Line 1 Line 2 Line 3">Hover for multi-line title</a>
testato questo in IE, Chrome, Safari, Firefox (versioni più recenti 2012-11-27):
Funziona in tutti loro ...
Inoltre vale la pena menzionare, se si imposta l'attributo titolo con JavaScript in questo modo:
divElement.setAttribute("title", "Line one Line two");
Non funzionerà. Si deve sostituire quella decimale ASCII 10 ad un ASCII esadecimale A nel modo in cui è fuggito con Javascript. In questo modo:
divElement.setAttribute("title", "Line one\x0ALine two");
Come di Firefox 12 che ora supportano le interruzioni di linea utilizzando l'entità di avanzamento HTML riga:
<span title="First line Second line">Test</span>
Questo funziona in IE ed è la corretta secondo le specifiche HTML5 per il attributo title .
Se si sta utilizzando jQuery:
$(td).attr("title", "One \n Two \n Three");
funzionerà.
testato in IE-9:. Di lavoro
Come contributo alla soluzione 
, possiamo anche usare 	 per le schede, se mai hai bisogno di fare qualcosa di simile.
<button title="My to-do list:
	-Item 2
	-Item 3
	-Item 4
		-Subitem 1">TEST</button>
Demo
Lo so, sono in ritardo alla festa, ma per coloro che vogliono solo vedere questo lavoro, ecco una demo: http://jsfiddle.net/rzea/vsp6840b/3/
HTML utilizzato:
<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>
funziona su tutte le major browser (IE incluso)
Abbiamo avuto un requisito dove abbiamo bisogno di testare tutti questi, ecco quello che desidero condividere
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/>
Io non credo che sia. Firefox 2 finiture lunghi titoli dei link in ogni caso e che in realtà dovrebbe essere utilizzato solo per trasmettere una piccola quantità di testo di aiuto. Se avete bisogno di più spiegazioni del testo Vorrei suggerire che appartiene in un paragrafo associato al collegamento. Si potrebbe quindi aggiungere il tooltip codice javascript per nascondere tali paragrafi e mostrare loro come tooltip al passaggio del mouse. Ecco la soluzione migliore per farla funzionare cross-browser IMO.

 <----- Questo è il testo necessario per inserire Carry ritorno.
In Chrome 16 e versioni precedenti, eventualmente, è possibile utilizzare "\ n". Come sidenote, "\ t" funziona anche
Per quanto riguarda il quale non ha funzionato si deve per lo stile l'elemento su cui le linee sono visibili come: white-space: pre-line;
di riferimento da questa risposta: https://stackoverflow.com/a/17172412/1460591
Basta usare questo:
<a title='Tool
Tip
On
New
Line'>link with tip</a>
È possibile aggiungere la nuova linea sul titolo utilizzando questo 
.
Basta usare JavaScript. Poi compatibile con la maggior e più anziani browser. Utilizzare la sequenza di escape \ n per nuova riga.
document.getElementById("ElementID").title = 'First Line text \n Second line text'
In base alle informazioni disponibili sull'accessibilità e l'uso di tooltip rendendole più grandi con l'uso di CR o di interruzione di linea è apprezzato, il fatto che i vari browser non può / non saranno d'accordo su basi mostra che lo fanno non molto a cuore accessibilità.
Secondo l'articolo questo sul sito W3C :
CDATA è una sequenza di caratteri del set di caratteri del documento e può includere entità carattere. I programmi utente dovrebbero interpretare attributo valori come segue:
- Sostituire le entità carattere con i caratteri,
- Ignora avanzamenti di riga,
- Sostituire ogni ritorno a capo o scheda con un singolo spazio.
Ciò significa che (almeno) CR e LF non funzionano all'interno attributo titolo. Io suggerisco di utilizzare un plugin tooltip. La maggior parte di questi plugin permettono arbitrario HTML da visualizzare come tooltip di un elemento.
Questa 
 dovrebbe funzionare se si utilizza un attributo semplice titolo.
sulla popovers bootstrap, basta usare data-html="true" e utilizzare html nel data-content attributo.
<div title="Hello 
World">hover here</div>
i suggerimenti alla ricerca molto più belli possono essere creati manualmente, e possono includere la formattazione 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>
Questa è preso da le w3schools inviare su questo. con il codice di cui sopra qui .
Razor Sintassi
Nel caso di ASP.NET MVC si può semplicemente memorizzare il titolo come una variabile come l'uso \r\n e funzionerà.
@{
var logTooltip = "Sunday\r\nMonday\r\netc.";
}
<h3 title="@logTooltip">Logs</h3>
hackerare ma funziona - (testato su cromo e mobile)
basta aggiungere spazi pausa fino a che non rompe - potrebbe essere necessario limitare le dimensioni tooltip a seconda della quantità di contenuto, ma per i piccoli messaggi di testo funziona:
etc
Ho provato tutto sopra e questa è l'unica cosa che ha funzionato per me -
uso data-html="true" e applicare <br>.
