Consider white-space : pre-line as a native part of hint--large

[bjbarouch]

Thanks for your beautifully structured and commented scss.

On those rare occasions when I put more text in a hint than most people would consider doing, I want to be able to use newlines within the hint. Unsurprisingly, this always coincides with using hint--large. As such, after I load hint.css, I drop this in:
.hint--large:after {
white-space : pre-line;
}
In other hint--sizes, pre-line doesn't play well, but as best I can tell, in hint--large it has no impact on normal amounts of text (it's backward-compatible), and is helpful for the rare, long hint that benefits from being broken up by newlines. As a practical example, consider a frequently useful hint for password fields such as:
At least one each of upper case, lower case, numeral, and other character.
At least 12 characters long.
It's not very long, but it's a bit bulky without the injected newline, and I think easier to read with the newline.

[chinchang]

@bjbarouch Thank you for your appreciation!
Just to confirm, once you have white-space: pre-line in place, you add newlines through the &#10 entity, correct?

If this proposal goes forward, another decision point would be whether to go with white-space: pre or white-space: pre-line - depending on do we want whitespaces besides the newlines truncated or not.

[bjbarouch]

Using
.hint--large:after {
white-space : pre-line;
}
and then using "\n\n" in the content works well. In my case, I didn't want to preserve whitespace in general, just to have the ability to introduce a line or "paragraph" break. It would be great to also be able to use <i> and a few other HTML tags, but I don't think that's an option in any scenario based on :after or :before.

I had some trouble with the resulting layout with hint.css when trying it out on mobile -- it ran off the edge of the screen, so I looked around some more, and I've switched to using tippy. Being javascript-based, it has its own location intelligence and also offers embedded HTML and many other features. What you are doing in a css-only approach is awesome, but for my style of working, the greater functionality that comes from using js is a better fit.

I'd still encourage you to do this pre-line thing because it's easy, useful, and backward-compatible. Surely some hint.css users will consider it a nice to have.