hint.css icon indicating copy to clipboard operation
hint.css copied to clipboard

Line break

Open d-bo opened this issue 8 years ago • 9 comments

Hello ! Cannot use <br> or a \r\n line breaks. Thank you.

d-bo avatar Dec 24 '15 11:12 d-bo

You can use this trick: http://stackoverflow.com/a/16452853

vsxed avatar Jan 25 '16 15:01 vsxed

Thanks vsxed ! For anyone else coming along, this means that you just have to add this to your hint.css :

[data-hint]:after {
  content: attr(data-hint);
  white-space: pre;
}

and use this entity for linebreaks : &#xa;

lavenpillay avatar Jan 28 '16 15:01 lavenpillay

FYI, starting v2.2.0, there are 3 size variations available: hint--small, hint--medium & hint--large. This should help make the situation better where long texts break out instead of spanning across multiple lines.

chinchang avatar Mar 07 '16 21:03 chinchang

For others who're struggling witht his: Im using v2.3.1 and had to use this CSS to make the line breaks work:

[class*=hint--][aria-label]:after {
  white-space: pre;
}

Neat plugin BTW :)

bjorntrondsen avatar Jun 15 '16 14:06 bjorntrondsen

If you want to also auto wrap on long lines you should use pre-line instead So you content won`t run off the container

[class*=hint--][aria-label]:after {
  white-space: pre-line;
}

nakashu avatar Jul 25 '16 13:07 nakashu

Awesome job guys - working in 2.4.0

To save time for others in case it isn't clear, the solution, evolved down to the nakashu jul25 post is for embedded '\n' to work, not the '&#xa;' in the lavenpillay post.

chrisamow avatar Mar 30 '17 22:03 chrisamow

Any chance to have this CSS modification included in hint.css?

roipoussiere avatar Feb 20 '21 13:02 roipoussiere

Try this &#10;

sd8514530 avatar Jul 25 '22 07:07 sd8514530

Any chance to have this CSS modification included in hint.css?

Will add! nice suggestion!

chinchang avatar Aug 09 '22 07:08 chinchang