Javascript:如何判断是否在2行上被破坏?

I display a bubble help for some short span elements. The bubbles are centered below that span and look great as long as the span isn't broken over two lines.

我显示一个气泡帮助一些短跨度的元素。气泡在这个跨度下居中，只要这个跨度不超过两条线，看起来就很不错。

Looks good:

看起来不错:

tell <span>irregular: told, told</span>

Looks bad:

看起来糟糕的:

tell <span>irregular: told,
told</span>

It looks bad, because the bubble isn't centered under the span anymore. Is there some way using JavaScript or jQuery to tell, if that span is broken over two lines?

这看起来很糟糕，因为气泡不再在跨度下居中。是否有一些方法可以使用JavaScript或jQuery来说明，如果这段跨越了两行?

4 个解决方案

#1

9000's comment is correct. The trick is having access to a  that you know will be rendered on a single line. You can do that by wrapping the first word of your block in a span with a specific id, you could also use the last word or some other single word; there are cases where a single word will cross lines but the first word should be safe.

9000的评论是正确的。诀窍是访问，您知道它将在一行中呈现。你可以用一个特定的id将block的第一个单词用一个span来表示，你也可以用最后一个单词或者其他单个单词;在某些情况下，一个单词会交叉，但第一个单词应该是安全的。

Once you have something that is only on one line you can compare its height to the height of the  that will get the tooltip. If the  that is getting the tooltip is taller than the single-line  then it has wrapped to multiple lines.

一旦你只在一行上了一些东西，你就可以将它的高度与将得到工具提示的的高度进行比较。如果获得工具提示的比单行高，那么它就被包装成多行。

Try this jsfiddle:

试试这个jsfiddle:

http://jsfiddle.net/ambiguous/JbMhZ/1/

http://jsfiddle.net/ambiguous/JbMhZ/1/

Adjust the size of the right panes until the red text wraps but the green text doesn't. Then hit Run in the toolbar at the top and it should say this at the bottom of the Result pane:

调整右窗格的大小，直到红色文本包装而绿色文本没有。然后点击顶部工具栏中的Run，在结果窗格的底部应该是:

#has-break spans more than one line
#no-break spans only one line

I'm not exactly proud of this hack but it should work.

我并不为这种方法感到自豪，但它确实有用。

I'm left wondering if a better positioning algorithm for your tooltip would be a better idea. Maybe pull the mouse coordinates out of the hover event and use that to position the tooltip rather than positioning it based on the .

我想知道一个更好的工具提示定位算法是否更好。也许将鼠标坐标从鼠标悬停事件中拉出来，并使用它来定位工具提示，而不是基于来定位工具提示。

#2

I think the nicer way to do this would be with white-space: nowrap in CSS:

我认为更好的方法是使用空格:CSS中的nowrap:

CSS:

span.bubble {
    white-space: nowrap;
}

HTML:

tell <span class="bubble">irregular: told, told</span>

#3

With or without a line break you can just calculate using .css() in jQuery where exactly on the screen is that span located and then position the tooltip accordingly. Or you can use a jQuery plugin to do all this for you.

无论有没有换行符，您都可以在jQuery中使用.css()进行计算，在那里屏幕上正好是这个跨度，然后相应地定位工具提示。或者您可以使用jQuery插件来完成所有这些工作。

#4

-3

Not quite sure what levels of help you're looking for, but \n is the identifier for linebreaks in JS

不确定您正在寻找的帮助级别，但是\n是JS中换行符的标识符

#1