Jak mogę użyć znaku powrotu karetki w etykiecie HTML?

Obecnie dodam do naszej witryny pełne opisy narzędzi i chciałbym (bez uciekania się do wtyczki jQuery typu whiz-bang, wiem, że jest ich wiele!) Korzystanie ze zwrotów karetki w celu sformatowania opisu.

Aby dodać wskazówkę, używam titleatrybutu. Rozejrzałem się po zwykłych stronach i korzystając z podstawowego szablonu:

<a title='Tool?Tip?On?New?Line'>link with tip</a>

Próbowałem zastąpić ?:

• <br />
• &013; / 

• \r\n
• Environment.NewLine (Używam C #)

Żadne z powyższych nie działa. Czy to możliwe?

To takie proste, że skopiesz się ... po prostu naciśnij Enter!

<a title='Tool
Tip
On
New
Line'>link with tip</a>

Firefox w ogóle nie wyświetla podpowiedzi wielowierszowych - zastąpi nowe wiersze niczym.

The Najnowsza specyfikacja pozwala znak nowego wiersza, tak prosty podział wiersza wewnątrz atrybutu lub podmiotu 
(zauważ, że znaki #i ;są wymagane) są OK.

Spróbuj postaci 10. Nie zadziała to jednak w Firefoksie. :(

Tekst jest wyświetlany (jeśli w ogóle) w sposób zależny od przeglądarki. Małe podpowiedzi działają w większości przeglądarek. Długie podpowiedzi i łamanie linii działają w IE i Safari (użyj 
lub 
dla nowej nowej linii). Firefox i Opera nie obsługują nowych linii. Firefox nie obsługuje długich podpowiedzi.

http://modp.com/wiki/htmltitletooltips

Aktualizacja:

Od stycznia 2015 r. Firefox obsługuje 
wstawianie podziału wiersza w titleatrybucie HTML . Zobacz przykładowy fragment poniżej.

<a href="#" title="Line 1&#13;Line 2&#13;Line 3">Hover for multi-line title</a>

Testowałem to w IE, Chrome, Safari, Firefox (najnowsze wersje 27.11.2012):



Działa we wszystkich ...

Warto również wspomnieć, jeśli ustawiasz atrybut title za pomocą Javascript w następujący sposób:

divElement.setAttribute("title", "Line one
Line two");

To nie zadziała. Musisz zamienić dziesiętną wartość ASCII 10 na szesnastkową wartość ASCII A w sposób, w jaki został on ujęty za pomocą Javascript. Lubię to:

divElement.setAttribute("title", "Line one\x0ALine two");

Począwszy od Firefoksa 12, obsługują teraz podział wiersza za pomocą encji HTML kanału: 


<span title="First line&#10;Second line">Test</span>

Działa to w IE i jest poprawne zgodnie ze specyfikacją HTML5 dla atrybutu title .

Jeśli używasz jQuery:

$(td).attr("title", "One \n Two \n Three");

będzie działać.

testowany w IE-9: działa.

Jako wkład do 
rozwiązania możemy również użyć &#009kart, jeśli kiedykolwiek będziesz musiał zrobić coś takiego.

<button title="My to-do list:&#013;&#009;-Item 2&#013;&#009;-Item 3&#013;&#009;-Item 4&#013;&#009;&#009;-Subitem 1">TEST</button>

Próbny


 będzie działać na wszystkich głównych przeglądarkach (w tym IE)

Wiem, że jestem spóźniony na imprezę, ale dla tych, którzy chcą zobaczyć, jak to działa, oto demo: http://jsfiddle.net/rzea/vsp6840b/3/

Używany HTML:

<a href="#" title="First Line&#013;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>

Nie wierzę, że tak jest. Firefox 2 przycina długie tytuły linków i tak naprawdę powinny one być używane tylko do przesyłania niewielkiej ilości tekstu pomocy. Jeśli potrzebujesz więcej tekstu wyjaśniającego, sugeruję, że należy on do akapitu powiązanego z linkiem. Następnie możesz dodać kod javascript podpowiedzi, aby ukryć te akapity i pokazać je jako podpowiedzi po najechaniu myszką. To najlepszy wybór, aby uruchomić IMO w różnych przeglądarkach.


 <----- To jest tekst potrzebny do wstawienia Carry Return.

W Chrome 16 i prawdopodobnie wcześniejszych wersjach możesz użyć „\ n”. Jako sidenote działa również „\ t”

Mieliśmy wymóg, w którym musieliśmy przetestować je wszystkie, oto, co chciałbym się podzielić

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&#13;Tip&#13;On&#13;New&#13;Line">Tooltip with <code>&amp;#13;</code> Not works Firefox browsers</p>
<hr/>

<p title='Tool&#10;Tip&#10;On&#10;New&#10;Line'>Tooltip with <code>&amp;#10;</code> Works in some browsers</p>
<hr/>

<p title='Tool&#x0aTip&#x0aOn&#x0aNew&#x0aLine'>Tooltip with <code>&amp;#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&#013;Tip&#013;On&#013;New&#013;Line'>Tooltip with <code>&amp;#013;</code> Works in most browsers</p>
<hr/>

Skrzypce

W Chrome 79 
 już nie działa.

Udało mi się:




Działa to we wszystkich głównych przeglądarkach.

Dla kogo 
nie działało, musisz stylizować element, na którym linie są widoczne, jako:white-space: pre-line;

Odniesienia do tej odpowiedzi: https://stackoverflow.com/a/17172412/1460591

Po prostu użyj tego:

<a title='Tool&#x0aTip&#x0aOn&#x0aNew&#x0aLine'>link with tip</a>

Możesz dodać nowy wiersz do tytułu za pomocą tego &#x0a.

Po prostu użyj JavaScript. Następnie kompatybilny z większością i starszych przeglądarek. Użyj sekwencji ucieczki \ n dla nowej linii.

   document.getElementById("ElementID").title = 'First Line text \n Second line text'

To 
 powinno działać, jeśli po prostu użyć atrybutu title proste.

w popoverach bootstrap, po prostu użyj data-html="true" i użyj html w data-contentatrybucie.

<div title="Hello &#013;World">hover here</div>

Z dostępnych informacji na temat dostępności i korzystania z podpowiedzi zwiększających je przy użyciu CR lub podziału linii docenia się fakt, że różne przeglądarki nie mogą / nie zgadzają się co do podstaw, pokazuje, że nie dbają one o dostępność.

Zgodnie z tym artykułem na stronie w3c :

CDATA to sekwencja znaków z zestawu znaków dokumentu i może zawierać jednostki znaków. Programy klienckie powinny interpretować wartości atrybutów w następujący sposób:

• Zamień byty postaci na znaki,
• Ignoruj ​​informacje o linii,
• Zastąp każdy znak powrotu karetki lub tabulator jedną spacją.

Oznacza to, że (przynajmniej) CR i LF nie będą działać w atrybucie tytułu. Sugeruję użycie wtyczki podpowiedzi. Większość tych wtyczek umożliwia wyświetlanie dowolnego kodu HTML jako podpowiedzi elementu.

Znacznie ładniej wyglądające podpowiedzi można tworzyć ręcznie i mogą one obejmować formatowanie 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&#13;&#10;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>

To pochodzi z postu w3schools na ten temat. Eksperymentuj z powyższym kodem tutaj .

Składnia Razor

W przypadku ASP.NET MVC możesz po prostu zapisać tytuł jako zmienną do użycia \r\ni zadziała.

@{ 
    var logTooltip = "Sunday\r\nMonday\r\netc.";
}

<h3 title="@logTooltip">Logs</h3>

włam się, ale działa - (testowany na Chrome i Mobile)

po prostu nie dodawaj spacji, dopóki się nie zepsuje - może być konieczne ograniczenie rozmiaru podpowiedzi w zależności od ilości treści, ale w przypadku małych wiadomości tekstowych działa to:

   etc

Wypróbowałem wszystko powyżej, a to jedyna rzecz, która zadziałała dla mnie -

Próbowałem z „”, aby wyświetlić tekst tytułu w nowym wierszu i działa jak urok

Jestem na Firefoxie 68.7.0esr i 
to nie działa. Przełamanie linii <CR>zadziałało, więc idę z tym, ponieważ jest to proste i do przodu. to znaczy

<option title="Constraint PSC/SCS/Activity
Definition Constraint Checker
Database Start Notifier">CnCk

użyj data-html="true"i zastosuj <br>.