4

我有一个带有 CSSwrap属性的 div 样式。它有一个固定的宽度，当内容超过允许的最大值时，它会分成不同的行。我正在构建一个应用程序，我需要了解不同的跨度元素是否在同一行中。让我举个例子：

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

4

2 回答 2

0

尝试这个：

<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来检查目标<span>是否被分成两行。offsetTop然后，它获取每个目标跨度的基线偏移量，并从逻辑上推断跨度是否在同一行开始/结束。

于 2012-05-22T15:51:07.247 回答
0

你可以这样做（它使用查询）：

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
}
于 2012-05-22T16:16:57.933 回答