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

Question

我有一個用CSS的wrap屬性設計的div。 它具有固定的寬度，當內容超過允許的最大值時，它會分成不同的行。 我正在構建一個應用程序，我需要了解不同的span元素是否在同一行中。 讓我舉個例子：

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

一個現實的例子： jsFiddle

我需要了解3個案例：

• 當跨度從同一行開始但以不同的行結束時。
• 當跨度以不同的行開始但在同一行結束時。
• 當跨距開始和結束在同一行時。

到目前為止我做了什么：

• 如果跨度具有相同的字體大小，則很容易使用offsetTop屬性進行估計。 我試過了，它運作正常。
• 但是，當跨度具有不同的字體大小時，它們也將具有不同的offsetTop 。 當font-size較小時， offsetTop增加，反之亦然，因此很難使用此屬性進行估算。
• 最后，均衡字體大小也不會起作用，因為當您更改字體大小時，適合一行的跨度可能必須分為兩行（例如，當字體大小從13px增加到25px時）。

那么，簡而言之，您如何使用純JavaScript來理解它？ 這是一個可以玩的jsFiddle 。

Answer 1

嘗試這個：

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

或者在這里玩它： http ： //jsfiddle.net/RYEnY/1/

一定要運行不同長度的文本。

它的工作原理是首先在要檢測的每個目標<span>的開頭和結尾插入一個隱藏的<span> 。 然后，代碼通過比較隱藏跨度的offsetTop來檢查目標<span>是否被分解為兩行。 然后，它抓取每個目標跨度的基線的偏移量並邏輯地推斷跨度是否在相同的線上開始/結束。

Answer 2

你可以這樣做（它使用查詢）：

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
}