JavaScript中的换行检测

我正试图找到一种方法来检测横幅中特定span标记中的wrapp。如果包装为2行，则将容器的总高度增加56px。还有一个副标题（headline2），它还需要将高度增加（或减少）40像素

我在这里写了一些基本的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

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

---

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

这里有一个非常基本的实现，介绍如何检测何时换行。希望这能让您知道从何处开始，并将其集成到您的应用程序中

这是所用材料的文件

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

调整演示窗口的大小以查看结果

任何问题我都会尽快问他们，如果我误解了，我会很高兴地改变：）

const h1=document.querySelector（'h1'）；
const banner=document.querySelector（“.banner”）；
//处理横幅上的样式更改以检查环绕
常量观察者=新的突变观察者（突变=>
forEach（mutationRecord=>onlinewrappodsomething（））
);
observe（banner，{attributes:true，attributeFilter:['style']}）；
//处理窗口大小调整事件
addEventListener（'resize'，onlinewrappodsomething）
函数onlinewrapodsomething（）{
const{lineHeight}=getComputedStyle（h1）；
const lineHeightParsed=parseInt（lineHeight.split（'px'）[0]）；
常数amountOfLinesTilAdjust=2；
if（h1.offsetHeight>=（分析的线高度*amountOfLinesTilAdjust））{
log（'您的h1现在已包装'）
}否则{
log（'您的h1在一行'）
}
}
//显示样式更改和包装时的日志，忽略下面令人厌恶的代码
设置超时（（）=>{
banner.style.width='50%'
设置超时（（）=>{
banner.style.width='100%'
}, 1500)
}，1500）

.banner{
宽度：100%；
}
h1{
线高：1.5
}

这是一些最终会换行的文本

使用窗口大小调整事件，检查文本元素的高度何时为行高*（您检查的行数），如果为true，则减小字体大小。如果窗口从未调整大小，而仅调整div的高度，这是否有效？顺便说一句，这不是整个页面需要更改。干杯，你说的高度是什么意思？它是如何缩小尺寸的？这非常有用。我以前从未遇到过变异观察者。Defo使用setTimeOut作为一种黑客方式来保持检查。我将采取这一点，并试图操纵，使其能够检测，1，2，3，4线等。非常感谢。在这里学到了一些新的东西&非常有用。是的，我前几天才真正看到了原生的MutationObserver，非常酷，我们在工作中使用它进行滚动条检测！：）很高兴帮助解决任何问题，请让我知道不幸的是

getComputedStyle（）。lineHeight

不保证返回

px

值。它通常返回字符串

“normal”

，这将破坏您的示例。