JavaScript 中的自动换行检测

Question

我正在尝试找出一种方法来检测横幅内特定跨度标签中的自动换行。如果它换行为 2 行，则将容器的总高度增加 56px。还有一个副标题（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

它只需要根据跨词是否换行一次、两次、三次等来改变横幅的高度。

对此的任何建议或帮助将不胜感激。

Answer 1

这是一个关于如何检测何时换行的非常基本的实现，希望这可以让您很好地了解从哪里开始并将其集成到您的应用中。

这里是使用的东西的文档

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>