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

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

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

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

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

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

Ни одно из вышеперечисленных работ. Возможно ли это?

Ответы

Ответ 1

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

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

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

Ответ 2

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

Это не будет работать во всех браузерах, поэтому убедитесь, что ваш текст имеет смысл при удалении новых строк.

Ответ 3

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

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

http://modp.com/wiki/htmltitletooltips

Обновление:

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

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

Ответ 4

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

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

Ответ 5

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

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

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

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

Ответ 6

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

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

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

Ответ 7

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

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

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

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

Ответ 8

В качестве вклада в решение &#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>

Ответ 9

&#13; будет работать, например, только

Ответ 10

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

Ответ 11

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

Ответ 12

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

Ответ 13

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

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

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

Ответ 14

Я знаю, что опаздываю на вечеринку, но для тех, кто просто хочет увидеть эту работу, вот демо: 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>

Ответ 15

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

Ссылка на этот ответ: fooobar.com/questions/27935/...

Ответ 16

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

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

Ответ 17

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

Ответ 18

В соответствии с этой статьей на веб-сайте w3c:

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

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

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

Ответ 19

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

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

Ответ 20

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

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

&nbsp;&nbsp; etc

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

Ответ 21

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

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

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

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