Обнаружение переноса слов в JavaScript - PullRequest
Новая
       21

Обнаружение переноса слов в JavaScript

0 голосов
/ 13 ноября 2018

Я пытаюсь найти способ обнаружить перенос слов в определенном теге span внутри баннера.Если он переносится на 2 строки, увеличьте общую высоту контейнера на 56 пикселей.Существует также подзаголовок (headline2), который также должен увеличить (или уменьшить) высоту на 40px.

Я написал здесь некоторый базовый JS-код, который проверяет высоту div диапазона, но это не очень хорошо.также будет работать только для 3 строк. 

   // Variable banner heights
    var hl11sub = 368;
    var hl21sub = 448;
    var hl31sub = 548;

    var hl12sub = 416;
    var hl22sub = 496;
    var hl32sub = 576;

    var hLFontSizeCSS = window.getComputedStyle(headlineText, null).getPropertyValue("font-size");
    var hL2FontSizeCSS = window.getComputedStyle(headline2text, null).getPropertyValue("font-size");
    var bannerHeightCSS = window.getComputedStyle(banner, null).getPropertyValue("height");
    var headlineHeight = headlineText.offsetHeight;
    var hL2HeadHeight = headline2text.offsetHeight;

    var headHeight = headlineText.style.lineHeight = parseInt(hLFontSizeCSS) + 10 + "px";
    var hL2Height = headline2text.style.lineHeight = parseInt(hL2FontSizeCSS) + 10 + "px";

    // Text Height values
    var hL1LineHeight = parseInt(headHeight); // 8 is line height & padding
    var hL2LinesHeight = 140;
    var hL3LinesHeight = 195;

    // HL2 height values
    var hL2TextOver1LineHeight = parseInt(hL2Height); // 8 is line height & padding
    var hL2TextOver2LineHeight = 84;

    if(hL2HeadHeight == hL2TextOver1LineHeight && headlineHeight == hL1LineHeight){
      banner.style.height = hl11sub + "px";
    }
    else if(hL2HeadHeight == hL2TextOver1LineHeight && headlineHeight == hL2LinesHeight){
      banner.style.height = hl21sub + "px";
    }
    else if(hL2HeadHeight == hL2TextOver1LineHeight && headlineHeight >= hL3LinesHeight){
      banner.style.height = hl31sub + "px";
    }
    else if(hL2HeadHeight == hL2TextOver2LineHeight && headlineHeight == hL1LineHeight){
      // Single headline with 2 lines sub
      banner.style.height = hl12sub + "px";
    }
    else if(hL2HeadHeight == hL2TextOver2LineHeight && headlineHeight == hL2LinesHeight){
      // 2 headlines with 2 lines sub
      banner.style.height = hl22sub + "px";
    }
    else {
      banner.style.height = hl32sub + "px";
      // 3 headlines with 2 lines sub

Требуется изменить только высоту баннера в зависимости от того, будут ли переноситься слова раз, два, три раза и т. д.

Любые предложенияили помощь с этим будет принята с благодарностью.

1 Ответ

0 голосов
/ 13 ноября 2018

Вот очень простая реализация того, как определить, когда строка обернута, надеюсь, это дает вам хорошее представление о том, с чего начать и интегрировать ее в ваше приложение.

Вот документы для использованного материала

https://developer.mozilla.org/en/docs/Web/API/EventTarget/addEventListener https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Вы упомянули изменение высоты, и вам нужно знать, когда она будет перенесена, вы можете использовать наблюдателя мутаций, чтобы проверить, когда стиль изменился, а затем проверить, не обернут ли он.

Измените размер демонстрационного окна, чтобы увидеть результаты

любые вопросы, я постараюсь получить их как можно скорее, если я неправильно понял, я с радостью изменю:) 

const h1 = document.querySelector('h1');
const banner = document.querySelector('.banner');


//handles style changes on banner to check wrapping
const observer = new MutationObserver(mutations =>
  mutations.forEach(mutationRecord => onLineWrapDoSomething())
);
observer.observe(banner, { attributes : true, attributeFilter : ['style'] });


// handles window resize events
window.addEventListener('resize', onLineWrapDoSomething)

function onLineWrapDoSomething() {
  const { lineHeight } = getComputedStyle(h1);
  const lineHeightParsed = parseInt(lineHeight.split('px')[0]);
  const amountOfLinesTilAdjust = 2;

  if (h1.offsetHeight >= (lineHeightParsed * amountOfLinesTilAdjust)) {
    console.log('your h1 now wrapped')
  } else {
    console.log('your h1 on one line')
  }
}

// shows it logs when style changes and it wraps, ignore the disgusting code below
setTimeout(() => {
  banner.style.width = '50%'
  setTimeout(() => {
    banner.style.width = '100%'
  }, 1500)
}, 1500)
.banner {
  width: 100%;
}
h1 {
  line-height: 1.5
}
<div class="banner">
  <h1>This is some text that will eventually wrap</h1>
</div>
...