Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Line break #100

Open
d-bo opened this issue Dec 24, 2015 · 9 comments
Open

Line break #100

d-bo opened this issue Dec 24, 2015 · 9 comments
Labels

Comments

@d-bo
Copy link

d-bo commented Dec 24, 2015

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

@vsxed
Copy link

vsxed commented Jan 25, 2016

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

@lavenpillay
Copy link

lavenpillay commented Jan 28, 2016

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;

@chinchang
Copy link
Owner

chinchang commented Mar 7, 2016

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.

@bjorntrondsen
Copy link

bjorntrondsen commented Jun 15, 2016

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

@nakashu
Copy link

nakashu commented Jul 25, 2016

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

@chrisamow
Copy link

chrisamow commented Mar 30, 2017

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.

@roipoussiere
Copy link

roipoussiere commented Feb 20, 2021

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

@sd8514530
Copy link

sd8514530 commented Jul 25, 2022

Try this &#10;

@chinchang
Copy link
Owner

chinchang commented Aug 9, 2022

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

Will add! nice suggestion!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

9 participants