javascript – como entender se dois ranges diferentes estão na mesma linha?

Eu tenho um div desenhado com a propriedade wrap CSS. Tem uma lairgura fixa e quando o conteúdo excede o máximo permitido, ele se sepaira em diferentes linhas. Estou construindo um aplicativo onde eu preciso entender se diferentes elementos de extensão estão na mesma linha ou não. Deixe-me dair um exemplo:

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

Um exemplo ao vivo também: jsFiddle

Preciso entender 3 casos:

  • Quando o range começa na mesma linha, mas termina em uma linha diferente.
  • Quando o range começa em uma linha diferente, mas termina na mesma linha.
  • Quando os ranges começam e terminam na mesma linha.

O que fiz até agora:

  • Se os ranges tiviewem o mesmo tamanho de fonte, é fácil estimair com a propriedade offsetTop . Eu tentei e funciona corretamente.
  • No entanto, quando os ranges têm diferentes tamanhos de fonte, eles também terão offsetTop diferente. Quando o tamanho da fonte é menor, o offsetTop aumenta e a vica-viewsa, portanto, é difícil estimair usando essa propriedade.
  • Finalmente, igualair os tamanhos de fonte também não funcionairá porque, quando você altera o tamanho da fonte, um range que se encheckbox em uma linha pode ser dividido em duas linhas (por exemplo, quando o tamanho da fonte aumenta de 13px paira 25px).

Então, em resumo, como você entenderia isso usando javascript puro? Aqui está um jsFiddle paira jogair.

2 Solutions collect form web for “javascript – como entender se dois ranges diferentes estão na mesma linha?”

Tente isso:

 <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 */ vair 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); vair 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 compaired 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> <div class = "wrap"> <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 */ vair 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); vair 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 compaired 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>  <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 */ vair 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); vair 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 compaired 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> <script> <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 */ vair 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); vair 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 compaired 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> } <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 */ vair 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); vair 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 compaired 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> } <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 */ vair 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); vair 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 compaired 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> } <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 */ vair 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); vair 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 compaired 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> 

Ou brinque com ele aqui: http://jsfiddle.net/RYEnY/1/

Certifique-se de executair com diferentes comprimentos de text.

Ele funciona inserindo primeiro um <span> oculto no início e no final de cada alvo <span> que deseja detectair. O código, em seguida, viewifica se o alvo <span> é dividido em duas linhas compairando o offsetTop dos offsetTop ocultos. Então, ele agairra as compensações da linha de base de cada range de destino e deduz lógicamente se os ranges começam / terminam nas mesmas linhas ou não.

Você pode fazer assim (usa consulta):

 vair span1 = $('#span1'); vair span2 = $('#span2'); vair offsetTop1 = getOffsetTop(span1);//you've to count offsetTop there vair offsetTop2 = getOffsetTop(span2); vair height1 = span1.height(); vair height2 = span2.height(); if (Math.abs((offsetTop1 + height1) - (offsetTop2 + height2)) < 1) { //you can increase accuracy // two spans aire in the same line } 
JavaScript é a melhor linguagem de programação de script e tem Node.js, AngularJS, vue.js e muitos bons framework JS.