javascript - 如何理解两个不同的跨度是否在同一行？

Question

I've got a div styled with CSS's wrap property. It has a fixed width and when content exceeds the maximum allowed it breaks into different lines. I'm building up an application where I need to understand whether different span elements are in the same line or not. Let me give an example:

<div style="width: 300px;" class="wrap">
    <span style="font-size:15px;color:red;">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
    <span style="font-size:17px;color:green;"> Vivamus in mauris dui, non posuere</span>
</div> 

A live example as well: jsFiddle

I need to understand 3 cases:

• When the span starts in the same line but ends in a different line.
• When the span starts in a different line but ends in the same line.
• When the spans start and end in the same line.

What I've done till now:

• If the spans have the same font-size it is easy to estimate with the offsetTop property. I tried it and it works properly.
• However, when spans have different font-sizes, they'll have different offsetTop as well. When the font-size is smaller, the offsetTop increases and the vica-versa, therefore it is hard to estimate using this property.
• Finally, equalizing the font-sizes will not work as well because when you change the font-size a span that fits to one line may have to be divided into two lines (eg when font-size increases from 13px to 25px).

So, in short, how would you understand it using pure javascript? Here is a jsFiddle to play around.

Answer 1

Try this:

<div class="wrap">
    <span id='first'>Lorem elit</span><span id='second'> Vivamus amet, consectetur</span>
</div> ​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

<script>
    /* Check if span is broken into two lines or not */
    var firstBefore = document.createElement('span'),
        firstAfter = document.createElement('span'),
        secondBefore = document.createElement('span'),
        secondAfter = document.createElement('span');

    first.insertBefore(firstBefore, first.childNodes[0]);
    first.appendChild(firstAfter);
    second.insertBefore(secondBefore, second.childNodes[0]);
    second.appendChild(secondAfter);

    var firstBroken = (firstBefore.offsetTop === firstAfter.offsetTop) ? false : true,
        secondBroken = (secondBefore.offsetTop === secondAfter.offsetTop) ? false : true;

    /* Since the spans' baselines seem to be aligned by default, lets compared that instead */
    first.offsetBottom = (first.offsetTop + first.offsetHeight);
    second.offsetBottom = (second.offsetTop + second.offsetHeight);

    /* Main logic */
    if (first.offsetBottom === second.offsetBottom) {
        if (!firstBroken && !secondBroken) {
            alert('Begins and ends on the same line');
        } else if (firstBroken) {
            alert('Begins on different lines, but end on the same line');
        }
    } else {
        if (firstBroken) {
            alert('Begins and ends on different lines');
        } else {
            alert('Begins on the same line, but ends on different lines');   
        }
    }​​
</script>

Or play with it here: http://jsfiddle.net/RYEnY/1/

Be sure to run with different lengths of text.

It works by first inserting a hidden <span> at the beginning and end of each target <span> you want to detect. The code then checks if the target <span> is broken up into two lines by comparing the offsetTop of the hidden spans. Then, it grabs the offsets of the baseline of each target span and logically deducts whether the spans begin/end on the same lines or not.

Answer 2

you can do like that (it uses query):

var span1 = $('#span1');
var span2 = $('#span2');
var offsetTop1 = getOffsetTop(span1);//you've to count offsetTop there
var offsetTop2 = getOffsetTop(span2);
var height1 = span1.height();
var height2 = span2.height();

if (Math.abs((offsetTop1 + height1) - (offsetTop2 + height2)) < 1) { //you can increase accuracy
    // two spans are in the same line
}