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>。然后，代码通过比较隐藏跨度的<span>来检查目标offsetTop是否被分解为两行。然后，它抓取每个目标跨度的基线偏移量，并在逻辑上推断出跨度是否在相同的行上开始/结束。

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
}

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

2 个答案: