Как я могу использовать возврат каретки в подсказке HTML?

В настоящее время я добавляю подробные всплывающие подсказки на наш сайт, и я бы хотел (не прибегая к плагину jQuery со свистом-взрывами, я знаю, что их много!) Использовать возврат каретки для форматирования всплывающей подсказки.

Чтобы добавить подсказку, я использую titleатрибут. Я просмотрел обычные сайты и использовал базовый шаблон:

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

Я попытался заменить на ?:

  • <br />
  • &013; / &#13;
  • \r\n
  • Environment.NewLine (Я использую C #)

Ничто из вышеперечисленного не работает. Является ли это возможным?

11.12.2008 10:11:55
Это довольно сложно, но может быть обходной путь. Измените все пробелы в вашем заголовке на неразрывные пробелы &nbsp;. Затем поместите пробелы там, где вы хотите разрывы строк. Вам также может понадобиться добавить несколько &nbsp;символов перед пробелом (перевод строки).
jumxozizi 25.11.2016 14:29:24
26 ОТВЕТОВ
РЕШЕНИЕ

Это так просто, что вы ударите себя ... просто нажмите Enter!

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

Firefox вообще не будет отображать многострочные всплывающие подсказки - он заменит новые строки ничем.

289
11.12.2008 10:24:34
Этот ответ устарел, Firefox делает дисплей новой строки в заголовках сейчас (я использую V25). Это работает с \n, \u000Aи \x0A.
Halcyon 12.08.2014 11:47:22
@Halcyon, просто чтобы уточнить для других читателей, приведенные выше три кода, похоже, не являются HTML. Они больше похожи на escape-последовательности, полученные из языка Си.
Sam 7.01.2015 01:31:25
@ Сэм, я не понимаю, что ты имеешь в виду под этим. \x0A(байт) - это код символа, соответствующий новой строке. То же самое для \u000A(Unicode). \nтакже перевод строки.
Halcyon 7.01.2015 14:02:31
@Halcyon, я попытался вставить эти escape-последовательности в titleатрибуты в Firefox и Chrome, и они просто были представлены буквально во всплывающей подсказке. Впоследствии я понял, что вы, вероятно, используете этот синтаксис как способ сообщить, какие символы (не escape-последовательности) следует использовать. Мой комментарий предназначен для того, чтобы сэкономить время других людей, предупредив их, чтобы они не пытались поместить ваши escape-последовательности в их HTML, чтобы они не теряли время, как я.
Sam 7.01.2015 20:53:36
@Tarquin Они не работают в HTML, они просто работают в двойных кавычках PHP, потому что это особенность двойных кавычек PHP.
Brilliand 26.05.2015 19:11:38

Попробуйте персонаж 10. Хотя он не будет работать в Firefox. :(

Текст отображается (если есть) в зависимости от браузера. Маленькие подсказки работают в большинстве браузеров. Длинные всплывающие подсказки и разрыв строки работают в IE и Safari (используйте &#10;или &#13;для новой новой строки). Firefox и Opera не поддерживают переводы строк. Firefox не поддерживает длинные всплывающие подсказки.

http://modp.com/wiki/htmltitletooltips

Обновить:

По состоянию на январь 2015 года Firefox поддерживает использование &#13;для вставки разрыва строки в titleатрибут HTML . Смотрите пример сниппета ниже.

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

75
1.02.2015 01:45:17
+1. Если вы решите использовать плагин jQuery, для оптимальной доступности он должен прочитать его содержимое из атрибута title и заменить произвольный невидимый символ переводом строки во время выполнения.
Kent Fredric 11.12.2008 10:19:18
+1. Интересные вещи. По-прежнему существует проблема, когда некоторые UA убирают название, когда оно появляется, - FF2, насколько я помню, но сейчас это не проблема.
roborourke 11.12.2008 10:25:42
По состоянию на январь 2015 года Firefox имеет поддержку использования &#13;в titleатрибуте , чтобы вставить разрыв строки.
pseudosavant 1.02.2015 01:38:18
Я не мог получить разрывы строк для работы в IE11 в элементе SVG <title>. Кто-нибудь имел больше успеха с этим? Пробовал выше / ниже упомянуть кодовые символы, ни один, кажется, не работает.
RemEmber 22.06.2015 14:21:30

&#13; будет работать на всех основных браузерах (включая IE)

8
11.02.2019 17:00:46
Этот ответ устарел; & # 13; работает в Chrome и других браузерах.
SaeX 14.06.2014 16:45:04

Я не верю, что это так. В любом случае Firefox 2 обрезает длинные заголовки ссылок, и их действительно следует использовать только для передачи небольшого количества справочного текста. Если вам нужно больше текста объяснения, я бы предположил, что он относится к абзацу, связанному со ссылкой. Затем можно добавить код JavaScript всплывающей подсказки, чтобы скрыть эти абзацы и отображать их как всплывающие подсказки при наведении курсора. Это ваш лучший выбор для работы кросс-браузерного IMO.

6
11.12.2008 10:23:08

Последняя спецификация позволяет линии подачи характер, так что простой разрыв строки внутри атрибута или объекта &#10;(обратите внимание , что символы #и ;обязательные) исправны.

304
16.10.2018 16:11:41
это не поддерживается Chrome, но для Firefox отлично!
Alaeddine 5.11.2015 09:35:02
Я пробовал и то &#10;и другое &#13;. &#13;не выполнил бы предполагаемые «разрывы строк» ​​в chrome версии 50.0.2661.94 (64-разрядная версия). &#10;хорошо работает в текущих версиях Chrome, Firefox и Opera (все для 64-битной Ubuntu) и Internet Explorer версии 11.0 и некоторые изменения в Windows.
Tass 12.05.2016 21:50:10
Это особенно полезно для меня, потому что я пытался сделать это в редакторе сообщений Wordpress.
ed1nh0 5.05.2017 13:10:19
& # 10; прекрасно работает в IE, Firefox и Chrome. Спасибо!
Daniel 25.05.2017 16:14:46
Для хрома & # 013; ....... Пример: title = "title1 & # 13; title2 & # 13; title3"
Malik Zahid 20.06.2019 05:26:31

&#xD; <----- Это текст, необходимый для вставки Carry Return.

6
18.01.2011 06:35:29
Работает во всех браузерах :)
MonoThreaded 26.06.2012 12:58:08

Из доступной информации о доступности и использования всплывающих подсказок, увеличивающих их с использованием CR или переноса строки, можно понять, что тот факт, что различные браузеры не могут / не согласятся с основами, показывает, что они не очень заботятся о доступности.

3
6.08.2011 21:32:43
Очень простое решение для перекрестной настройки настраиваемых подсказок браузера см. В kollermedia.at/archive/2008/03/24/easy-css-tooltip/…
Dave 7.08.2011 01:14:27
@DaveThis - хорошая ссылка, однако разрыв строки в демке происходит из-за атрибута width
Melsi 19.10.2012 14:59:29

Согласно этой статье на сайте w3c :

CDATA - это последовательность символов из набора символов документа и может включать в себя объекты символов. Пользовательские агенты должны интерпретировать значения атрибутов следующим образом:

  • Заменить символьные объекты на символы,
  • Игнорировать перевод строки,
  • Замените каждый возврат каретки или табуляцию одним пробелом.

Это означает, что (по крайней мере) CR и LF не будут работать внутри атрибута title. Я предлагаю вам использовать плагин всплывающей подсказки. Большинство из этих плагинов позволяют отображать произвольный HTML в виде всплывающей подсказки элемента.

3
24.08.2011 05:29:44
Да, я знаю, что это не официально. Вы не правы, однако. Это не значит, что они не будут отображаться. Это означает, что в спецификации W3C не указано, как они должны отображаться .... Смысл поста не в том, чтобы предположить, что они могут быть использованы для замены более функциональных плагинов ... это был скорее случай, когда деградация может быть использована любым другим.
penderi 12.09.2011 13:48:10
@ip: Я ошибаюсь тем, что обновленные рекомендации w3c предполагают, что браузеры разделяют контент вокруг символа LF. Однако браузеры будут реализовывать это поведение в конце концов.
Salman A 14.09.2011 04:23:07

В Chrome 16 и, возможно, более ранних версиях вы можете использовать "\ n". В качестве идентификатора, "\ t" также работает

6
25.10.2011 23:56:43

Начиная с Firefox 12, теперь они поддерживают разрывы строк с использованием сущности HTML перевода строки: &#10;

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

Это работает в IE и является правильным в соответствии со спецификацией HTML5 для атрибута title .

29
9.07.2014 12:58:04

Если вы используете jQuery:

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

будет работать.

протестировано в IE-9: работает.

16
18.10.2012 14:54:25
Работал в MVC 3 Пример: @ Html.DropDownList ("RegId", null, "Select Region", new {title = "Выберите регион из раскрывающегося меню, \ nсвободного для получения списка действительных имен контрактов" , @class = "form-control", onchange = "getContractNames (this)", style = "width: 200px;"})
Warren LaFrance 4.11.2015 19:12:37

Также стоит упомянуть, если вы устанавливаете атрибут title с помощью Javascript следующим образом:

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

Это не сработает. Вы должны заменить десятичную ASCII-цифру 10 на шестнадцатеричную A-кодировку ASCII так, как она экранирована с помощью Javascript. Нравится:

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

51
3.11.2012 01:15:41
@MaxNanasy Согласны, и они эквивалентны (в \nлюбом случае означает код символа 10)
rvighne 14.08.2016 05:28:35

Протестировано это в IE, Chrome, Safari, Firefox (последние версии 2012-11-27):
&#13;

Работает во всех из них ...

64
27.11.2012 13:34:19
Первый способ (разрыв строки в коде) кажется более простым, но он не подходит для автоформатирования программ js-кода.
horiatu 24.07.2015 15:05:09
@Camilo Martin, newline и linefeed одинаковы для разных платформ. &#10;перевод строки в Unix так же, как перевод строки Windows. Точно так же &#13;это новая строка для обеих платформ. В спецификации определяет перевод строки (LF) полукокса , который, конечно , &#10;на обоих (всех?) Платформ.
matty 29.08.2015 07:45:47
@matty Не уверен, что я вас понимаю - правильная вещь, которую нужно использовать, - это Unix LF(который является стандартным переводом строки между протоколами и инструментами), CRиспользовался только старыми компьютерами Mac (и другими малоизвестными платформами) и кажется неуместным.
Camilo Martin 30.08.2015 09:26:30
Я прошу прощения за мой запутанный выбор слова. То, что я назвал переводом строки (# 10), действительно является новой строкой, хотя ее часто называют LF. То, что я назвал переводом строки (# 13), на самом деле означает возврат каретки. В любом случае, я хотел сказать, что эти значения одинаковы для всех платформ. Тот факт, что окна (использующие оба этих символа для окончания строки) и mac (использующий «неправильный» символ для окончания строки) не должны иметь значения в отношении того, какой объект HTML должен использоваться в атрибуте title. Спецификация говорит &#10;, хотя, очевидно, &#13;работает и во многих обстоятельствах.
matty 31.08.2015 06:23:01
равнина & # 13; не работает для хрома в Linux. Последовательность & # 13; & # 10; делает, однако.
Sam Watkins 1.01.2016 12:32:04

Просто используйте это:

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

Вы можете добавить новую строку в заголовок, используя это &#x0a.

4
27.03.2014 10:02:07

Я знаю, что опаздываю на вечеринку, но для тех, кто просто хочет, чтобы это работало, вот демо: http://jsfiddle.net/rzea/vsp6840b/3/

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>
7
3.11.2014 15:10:55
Самый современный ответ и прекрасно работает на Firefox. Спасибо.
Marwan مروان 29.01.2015 05:10:06

Просто используйте JavaScript. Затем совместим с большинством и более старых браузеров. Используйте escape-последовательность \ n для новой строки.

   document.getElementById("ElementID").title = 'First Line text \n Second line text'
4
20.06.2016 16:58:45
Какая версия Chrome? Это работает для меня, и я использую Chrome.
Welshboy 16.11.2016 14:20:47
На самом деле я использую последнюю версию Chrome, однако, так как я работал над SVG Elements, она не работала, не все в порядке.
NewPHPer 17.11.2016 12:08:22

Для тех, кто &#10;не работал, вы должны стилизовать элемент, на котором строки видны как:white-space: pre-line;

Ссылка на этот ответ: https://stackoverflow.com/a/17172412/1460591

5
23.05.2017 11:54:59
Этот стиль должен быть применен к чему? Название? как a[title]?
xameeramir 23.09.2016 10:03:40

В качестве вклада в &#013;решение, мы также можем использовать &#009вкладки, если вам когда-нибудь понадобится сделать что-то подобное.

<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>

демонстрация

введите описание изображения здесь

15
20.09.2016 11:57:40

У нас было требование, где нам нужно было протестировать все это, вот что я хотел бы поделиться

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/>

скрипка

6
23.09.2016 10:07:29

взломать, но работает - (проверено на Chrome и мобильных)

просто не добавляйте пробелов до тех пор, пока они не сломаются - возможно, вам придется ограничить размер всплывающей подсказки в зависимости от объема содержимого, но для небольших текстовых сообщений это работает:

&nbsp;&nbsp; etc

Перепробовал все выше, и это единственное, что сработало для меня -

0
28.04.2017 19:01:06

Синтаксис бритвы

В случае ASP.NET MVC вы можете просто сохранить заголовок как переменную и использовать \r\nего.

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

<h3 title="@logTooltip">Logs</h3>
1
14.07.2017 12:50:16

Это &#013;должно работать, если вы просто используете простой атрибут title.

на всплывающих окнах начальной загрузки просто используйте data-html="true" и используйте html в data-contentатрибуте.

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

4
17.04.2018 11:15:26

Более приятные на вид подсказки могут быть созданы вручную и могут включать форматирование 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>

Это взято из поста w3schools . Поэкспериментируйте с приведенным выше кодом здесь .

2
20.06.2018 15:48:10

использовать data-html="true"и применять <br>.

-1
5.09.2018 12:03:21
Это не часть спецификации. Должно быть какой-нибудь случайный плагин всплывающей подсказки
T J 12.12.2018 14:21:55

Я попытался с "", чтобы отобразить текст заголовка в новой строке, и это работает как шарм

0
6.11.2019 06:09:32

На Chrome 79 &#13;больше не работает.

Я был успешным с:

&#13;&#10;

Это работает во всех основных браузерах.

5
8.01.2020 22:36:23