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种情况:

• 当跨度在同一行开始但在不同的行结束时。
• 当跨度从不同的行开始但在同一行结束时。
• 当跨度在同一行开始和结束时。

到目前为止我做了什么:

• 如果 span 具有相同的字体大小，则很容易使用 offsetTop 属性进行估计。我试过了，它工作正常。
• 但是，当 span 具有不同的字体大小时，它们也会有不同的 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>你想检测。然后代码检查目标是否为 <span>通过比较 offsetTop 分为两行隐藏的跨度。然后，它获取每个目标跨度的基线偏移量，并从逻辑上推断跨度是否在同一行开始/结束。