4

wrapCSS のプロパティでスタイル設定された 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 つのケースを理解する必要があります。

  • スパンが同じ行で始まり、別の行で終わる場合。
  • スパンが別の行で始まり、同じ行で終わる場合。
  • スパンが同じ行で開始および終了する場合。

私が今までやってきたこと：

  • スパンの font-size が同じ場合、プロパティを使用して簡単に見積もることができoffsetTopます。試してみましたが、正常に動作します。
  • ただし、スパンのフォント サイズが異なる場合は、フォント サイズも異なりoffsetTopます。font-size が小さいとoffsetTop大きくなり、逆もまた同様であるため、このプロパティを使用して推定することは困難です。
  • 最後に、font-size を変更すると、1 行に収まるスパンを 2 行に分割する必要がある場合があるため (たとえば、font-size が 13px から 25px に増加した場合)、font-size を均等化してもうまくいきません。

要するに、純粋な 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>比較して、ターゲットが 2 行に分割されているかどうかを確認します。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 に答える