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

330

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; / &#13;
  • \r\n
  • Environment.NewLine (Używam C #)

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

penderi
źródło
Jest to dość trudne, ale może istnieć obejście. Zmień wszystkie spacje w tytule na spacje niełamliwe &nbsp;. Następnie umieść spacje w miejscu, w którym chcesz łamać linie. Być może trzeba będzie dodać kilka &nbsp;znaków przed spacją (łamanie wiersza).
jumxozizi

Odpowiedzi:

292

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.

Greg
źródło
69
Ta odpowiedź nieaktualne, Firefox czy znaki nowej linii wyświetlacza w tytułach teraz (używam V25). Działa z \n, \u000Ai \x0A.
Halcyon,
1
@Halcyon, aby wyjaśnić innym czytelnikom, powyższe trzy kody nie wydają się HTML. Wyglądają bardziej jak sekwencje specjalne języka pochodzące z języka C.
Sam
3
@Sam Nie rozumiem, co masz na myśli. \x0A(bajt) to kod znakowy odpowiadający nowej linii. To samo dla \u000A(Unicode). \njest również nowa linia.
Halcyon
13
@Halcyon, próbowałem wstawić te sekwencje specjalne do titleatrybutu w Firefoksie i Chrome, i zostały one dosłownie przedstawione w etykiecie. Potem zdałem sobie sprawę, że prawdopodobnie używasz tej składni jako sposobu komunikowania, które znaki (a nie sekwencje specjalne) powinny zostać użyte. Mój komentarz dotyczy oszczędzania czasu innym ludziom, ostrzegając ich, aby nie próbowali umieszczać sekwencji ucieczki w kodzie HTML, aby nie tracili czasu tak jak ja.
Sam
4
@ Tarar Nie działają w HTML, po prostu działają w podwójnych cudzysłowach PHP, ponieważ jest to cecha podwójnych cudzysłowów PHP.
Brilliand
307

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

Kornel
źródło
4
nie jest obsługiwany przez Chrome, ale dla Firefox w porządku!
Alaeddine,
5
Próbowałem obu &#10;i &#13;. &#13;nie honorowałby zamierzonych „podziałów linii” w wersji chromowanej 50.0.2661.94 (64-bitowej). &#10;działa dobrze w aktualnych wersjach Chrome, Firefox i Opera (wszystkie dla 64-bitowego Ubuntu) i Internet Explorera w wersji 11.0 i niektóre zmiany w systemie Windows.
Tass
Jest to szczególnie przydatne, ponieważ próbowałem to zrobić w edytorze postów Wordpress.
ed1nh0
13
I # 10; działa pięknie w IE, Firefox i Chrome. Dzięki!
Daniel
Do chromu & # 013; ....... Przykład: title = "title1 & # 13; title2 & # 13; title3"
Malik Zahid
75

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 &#10;lub &#13;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 &#13;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>

Stefan Mai
źródło
2
+1. Jeśli zdecydujesz się na użycie wtyczki jQuery, w celu uzyskania optymalnej dostępności należy odczytać jej zawartość z atrybutu title i zastąpić dowolny niewidzialny znak podziałem linii w czasie wykonywania.
Kent Fredric,
+1. Interesujące rzeczy. Nadal pojawia się problem niektórych UA przycinających tytuł, gdy się pojawia - FF2, jak pamiętam, ale to mniej problem w dzisiejszych czasach.
roborourke,
3
W styczniu 2015 Firefox nie obsługuje korzystania &#13;w titleatrybucie wstawić podział wiersza.
pseudosavant
Nie mogłem uzyskać podziałów linii do działania w IE11 w elemencie SVG <title>. Czy ktoś miał z tym większy sukces? Próbowałem wyżej / poniżej wspomnieć o kodach znaków, żaden nie wydaje się działać.
RemEmber
64

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

Działa we wszystkich ...

Morten Repsdorph Husfeldt
źródło
Pierwsza metoda (przerywanie linii w kodzie) wydaje się prostsza, ale nie jest zgodna z programami do automatycznego formatowania programów w kodzie js.
horiatu
@Camilo Martin, newline i linefeed są takie same na różnych platformach. &#10;jest uniksowym kanałem liniowym, tak jak to jest kanałem liniowym systemu Windows. Podobnie &#13;jest nowa linia dla obu platform. W Spec Określa znak końca linii (LF) char co jest oczywiście &#10;na obu (wszystkich?) Platform.
matty
2
@matty Nie jestem pewien, czy cię rozumiem - poprawna rzecz wydaje się, że unix LF(który jest rodzajem standardowego przejścia między protokołami i narzędziami), CRbył używany tylko przez stare komputery Mac (i inne niejasne platformy) i wydaje się nie na miejscu.
Camilo Martin
Przepraszam za mylący wybór słów. To, co nazwałem linefeed (# 10), to tak naprawdę nowa linia, choć często nazywana LF. To, co nazwałem znakiem nowej linii (# 13), to tak naprawdę powrót karetki. W każdym razie miałem na myśli, że te wartości są takie same na wszystkich platformach. Fakt, że Windows (używając obu tych znaków do zakończenia linii) i mac (używając „złego” znaku do końca linii) powinien być nieistotny w odniesieniu do tego, która jednostka HTML ma być użyta w atrybucie tytułu. Specyfikacja mówi &#10;, choć najwyraźniej &#13;działa również w wielu okolicznościach.
matty
2
zwykły & # 13; nie działa dla Chrome w systemie Linux. Sekwencja & # 13; & # 10; robi to jednak.
Sam Watkins
51

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

divElement.setAttribute("title", "Line one&#10;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");

cprcrack
źródło
@ MaxNanasy wyraził zgodę i są one równoważne (w \nkażdym razie kod char 10)
rvighne
29

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

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

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

amurra
źródło
16

Jeśli używasz jQuery:

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

będzie działać.

testowany w IE-9: działa.

Anil Bharadia
źródło
Pracowałem w MVC 3 Przykład: @ Html.DropDownList („RegId”, null, „Select Region”, new {title = „Wybierz region z menu rozwijanego, \ n który jest wymagany, aby uzyskać listę prawidłowych nazw kontraktów” , @class = "form-control", onchange = "getContractNames (this)", style = "width: 200px;"})
Warren LaFrance
15

Jako wkład do &#013;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

wprowadź opis zdjęcia tutaj

Juan Cortés
źródło
8

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

Greg Dean
źródło
13
Ta odpowiedź jest nieaktualna; I # 13; działa również w Chrome i innych przeglądarkach.
SaeX
7

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>
Ricardo Zea
źródło
2
Najbardziej aktualna odpowiedź i działa świetnie w przeglądarce Firefox. Dzięki.
Marwan مروان
6

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.

roborourke
źródło
6

&#xD; <----- To jest tekst potrzebny do wstawienia Carry Return.

Juan
źródło
1
Działa we wszystkich przeglądarkach :)
MonoThreaded
6

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

Rehan Khwaja
źródło
6

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

Mohammed Zameer
źródło
6

W Chrome 79 &#13; już nie działa.

Udało mi się:

&#13;&#10;

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

David Vielhuber
źródło
5

Dla kogo &#10;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

Youans
źródło
1
Ten styl należy zastosować do czego? Tytuł? jak a[title]?
Mohammed Zameer,
4

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.


źródło
4

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'
Walijczyk
źródło
Jaka wersja Chrome? To działa dla mnie i używam Chrome.
Welshboy
Właściwie używam najnowszej wersji Chrome, jednak ponieważ pracowałem nad SVG Elements, to nie działało, nie jest OK.
NewPHPer
4

To &#013; 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>

csandreas1
źródło
3

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ść.

Dave
źródło
2
Aby uzyskać bardzo łatwe rozwiązanie do dostosowywania podpowiedzi w różnych przeglądarkach, zobacz kollermedia.at/archive/2008/03/24/easy-css-tooltip/…
Dave
@DaveTo jest fajny link, jednak podział wiersza w demie dzieje się z powodu atrybutu szerokości
Melsi
3

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.

Salman A.
źródło
1
Tak, wiem, że to nie jest oficjalne. Mylisz się jednak. To nie znaczy, że nie będą wyświetlane. Oznacza to, że specyfikacja W3C nie określa, jak powinny być wyświetlane ... Celem tego postu nie było zasugerowanie, że można je zastąpić bardziej funkcjonalnymi wtyczkami ... był to raczej przypadek degradacji, którego można użyć w inny sposób.
penderi
@ip: Mylę się, że zaktualizowane rekomendacje w3c sugerują, że przeglądarki dzielą zawartość wokół znaku LF. Jednak przeglądarki w końcu zaimplementują to zachowanie.
Salman A
2

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 .

Chris
źródło
1

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>
Shelby115
źródło
0

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:

&nbsp;&nbsp; etc

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

Fstarocka Burns
źródło
0

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

Niket Joshi
źródło
0

Jestem na Firefoxie 68.7.0esr i &#013;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żytkownik3416126
źródło
-1

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

Nithin C.
źródło
1
To nie jest część specyfikacji. Musi to być jakaś losowa wtyczka podpowiedzi
TJ