JavaScript 中的自动换行检测

Question

我正在尝试找出一种方法来检测横幅内特定跨度标记中的自动换行。如果它换行到 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

它只需要改变横幅的高度，这取决于跨度词是否换行一次、两次、三次等

如有任何建议或帮助，我们将不胜感激。

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

您提到了高度变化并且您需要知道它何时包裹您可以使用变异观察器来检查样式何时发生变化然后检查它是否包裹。

调整演示大小window以查看结果

如有任何问题，我会尽快与他们联系，如果我误解了，我会很乐意更改 :)

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>

JavaScript 中的自动换行检测

Word Wrap detection in JavaScript

javascript

dynamic

height