CODEWITHSUNDEEP
htmlcssword-wrap
Simon
Simon

Reputation: 5432

Wrapping title attribute

Firefox does not wrap words in a title attribute:

<a title="longword"></a>

Is there a way to do word-wrapping in that case? I tried with:

<a title="longword" style="word-wrap:break-word;"></a>

but it does not work.

Chrome, instead, automatically wraps.

Upvotes: 1

Views: 10377

Answers (4)

shrekuu
shrekuu

Reputation: 2282

@2023-05

Simply use &#10; as the linebreak like this.

<div title="A &#10; Leaf &#10; Falls &#10; with &#10; Loneliness">
  Hover your mouse here to see the native tooltip content.
</div>

Here is a working demo. https://codepen.io/shrekuu/pen/dygLKGO

enter image description here

Upvotes: 1

Alaina
Alaina

Reputation: 19

Use escaped n, example: 

<input type="text" title="first line \n second line"></input>

Upvotes: -3

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201896

No, you cannot make Firefox deviate from its way of rendering title attribute values; cf. to How can I use a carriage return in a HTML tooltip?

The tooltips created by using title attributes are of questionable usability (tiny font that cannot be easily increased by the user; disapperance after some seconds; etc.), so they are suitable (at most) for short advisory titles (mainly for links), which not cause a need for wrapping.

For longer tooltips, consider using CSS techniques. Or just put the tip into the text proper.

Upvotes: 3

Yi Jiang
Yi Jiang

Reputation: 50165

For what it's worth, the only part of the HTML5 specifications that deals with line breaks in title attributes states:

If the title attribute's value contains U+000A LINE FEED (LF) characters, the content is split into multiple lines. Each U+000A LINE FEED (LF) character represents a line break.

So you could break up the title attribute on the server-side, although this is unlikely to be a desirable solution. Alternatively, you can try inserting zero width spaces, though browser support for this may also be inconsistent.

Upvotes: 2

Related Questions