hint.css manual line break in hint

问题

How can I apply manual line breaks in Hint.css hints?

I tried almost everything: <br>, \n, and combinations of them.

I tried also some things in the CSS:

white-space: normal;
word-wrap: break-word;
word-wrap: no-wrap;
word-wrap:break-word
white-space: nowrap;

Now: Without line break, the hint is one line high, but and any length long.

Ideally: Apply a manual line break wherever I want, leaving the untouched hints without line breaks.

回答1:

Found the answer at:

https://github.com/chinchang/hint.css/issues/24

In action:

[http://jsfiddle.net/gVPty/][2]

回答2:

I was struggling with this today and came across this answer so I'm posting my solution:

I needed the tooltip to automatically break the line - because some tooltips I couldn't control the content. So the solution was adding the "line-breaker" properties to the tooltip element:

```

[class*=hint--]:after {
    min-width: 300px;
    white-space: pre-wrap;
    word-break: break-all;
}

```

The min-width is set so when you have a string like "aaaaaaaaaaaaaaaaaaaaaaaa" it doesn't break all the the "a"s into new lines without considering a min-width. Here is an example: http://plnkr.co/edit/CfTCxaqPxd1K2Jx5P7nc

回答3:

Im using v2.3.1 and had to add this CSS to make the line breaks work:

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

Im using 
 as the line break character.

来源：https://stackoverflow.com/questions/24310180/hint-css-manual-line-break-in-hint