Javascript 如何使用JS检测单词；“孤儿”；在固定宽度div末尾的一行上？

我不确定“孤儿”是否合适，但这是我能想到的最好的办法

我希望能够检测div中文本末尾的最后一行中是否有一个或两个额外的单词

请注意：我不是想通过在最后一行给他们加上另一个词来消除这些“孤儿”。

我有一个固定宽度的div，其中包含需要在一行末尾均匀结束的文本。有时一个词（或两个词）会潜到另一行。我希望能够检测何时发生这种情况（这样代码就可以调整div的字体大小，直到孤立单词/单词弹出到前一行）

使用

文本最后对齐：对齐本身并不能解决我的问题

我一直在尝试
element.getClientRects（）
，我想我会为每一行得到一个矩形，然后看看给定的最低矩形的宽度。但是对于一个div，我只得到一个矩形。如果我把文本放在div中的一个span中，我有时会得到九个矩形，在span中有六行文本。哎呀！我不知道这些矩形代表什么

有人知道我可以在固定宽度div中的多行文本末尾自动检测一行上的额外孤立单词的方法吗


附加
请注意：最佳行数未提前确定；它可以是一行到五行之间的任意一行。

我被要求举例说明

示例1显示了三行，但应为两行：

示例2还显示为三行，也应该是两行：

例3我不想“修复”，因为最后一行有太多单词：
已更新：现在解决方案检测最后一行是否有
阈值
字数。这里我将
阈值设置为
2
。对于第二个div，它在最后一行以三个单词结尾，并且没有改变。对于第三个div，它在最后一行以一个单词结尾，并缩小。在第四节中，它从最后一行的两个单词开始，然后收缩


const阈值=2；
document.queryselectoral（“div.fixed”）.forEach（el=>{
const{height:originalHeight}=el.getClientRects（）[0]；
设阈值指数；
for（设i=el.innerHTML.length，occurrences=0；i>0；i--）{
if（el.innerHTML[i]=“”）{
事件++；
}
如果（发生===阈值）{
阈值指数=i；
打破
}
}
if（阈值索引）{
const lastWords=el.innerHTML.substring(
阈值指数，
el.innerHTML.length
);
const text=el.innerHTML.substring（0，thresholdIndex）；
el.innerHTML=文本；
const{height:newHeight}=el.getClientRects（）[0]；
el.innerHTML+=lastWords；
if（新高度<原始高度）{
让高度=原始高度；
while（高度>新建高度）{
const currentFontSize=parseInt(
window.getComputedStyle（el）.getPropertyValue（“字体大小”），
10
);
const newFontSize=currentFontSize-1；
el.style.fontSize=`${newFontSize}px`；
高度=el.getClientRects（）[0]。高度；
}
}
}
});
div{
宽度：200px；
填充：10px；
字体大小：16px；
}
Text文本
文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本
我在另一个网站上找到了您问题的答案：

“将每个字符包装在
中，然后在这些
中循环，检查每个字符的偏移值。”

在您的情况下，您只关心最后三个元素是否在最后一个元素之上，因为您想知道最后两个单词是否挂起

我制作了这个小片段来展示它是如何工作的：（从208到209应该会产生变化）


var段落=document.getElementById（“段落”）；
var thirdLast=document.getElementById（“最后三个”）；
var last=document.getElementById（“last”）；
var widthSelector=document.getElementById（“宽度”）；
函数handleWidth（）{
var-fontSize=16；
段落.style.fontSize=fontSize+“px”；
变量宽度=宽度选择器.value；
段落.style.width=宽度+px；
while（thirdLast.offsetTop0）{
字体大小--；
段落.style.fontSize=fontSize+“px”；
}
}


知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除非圣奥卡塔特无过失，必须
这是我的错
动画id
最难产。
发布的两个解决方案不太符合我的需要。（我的写作方式可能要负部分责任。无论如何，我都投票支持了他们。）我最终写下了自己的方法来计算div应该占用的行数

我在div中放置了一个span。该方法将客户端矩形在每个y位置的宽度相加，以获得span中每行的长度（不确定为什么首先要将它们分开，但它们是！）。然后计算小于div宽度一半的这些矩形的数量，并将其作为最佳行数返回

howManyLinesIsBest(divEl) {
    const rect0 = (divEl.getClientRects())[0];
    const width = rect0.width;
    const span = (divEl.getElementsByTagName("span"))[0];
    const lines = {};
    [].forEach.call(span.getClientRects(),
      v => {
        if (lines.hasOwnProperty(v.y)) {
          lines[v.y] += v.width;
          return;
        }
        lines[v.y] = v.width;
      }
    );
    const wideRects = Object.values(lines).filter(v => v > width/2);
    return wideRects.length > 1 ? wideRects.length : 1;
  }

它工作得很好
 你能用一个例子添加一段代码吗？你好像在改变字体大小。我想知道最后一行是否有多余的词。这些div也可能是一个
DOMRectList {0: DOMRect, 1: DOMRect, 2: DOMRect, 3: DOMRect, length: 4}
0: DOMRect {x: 475.796875, y: 328.875, width: 60.609375, height: 22, top: 328.875, …}
1: DOMRect {x: 536.40625, y: 328.875, width: 48.21875, height: 22, top: 328.875, …}
2: DOMRect {x: 139, y: 352.875, width: 445.546875, height: 22, top: 352.875, …}
3: DOMRect {x: 139, y: 376.875, width: 65.109375, height: 22, top: 376.875, …}
length: 4
__proto__: DOMRectList

<div class="chunk">
<span> οὔ)· ἄνθρωπος γὰρ ἵππου ἕτερον τῷ εἴδει καὶ
 τἀναντία ἀλλήλων. 
 καὶ πρὸς Παρμενίδην δὲ ὁ αὐτὸς τρόπος τῶν λόγων,
 <div class="bekkerLine">22</div>
</span></div>

DOMRectList {0: DOMRect, 1: DOMRect, 2: DOMRect, 3: DOMRect, 4: DOMRect, length: 5}
0: DOMRect {x: 123, y: 319.875, width: 375.5, height: 22, top: 319.875, …}
1: DOMRect {x: 498.5, y: 319.875, width: 70.203125, height: 22, top: 319.875, …}
2: DOMRect {x: 123, y: 343.875, width: 82.40625, height: 22, top: 343.875, …}
3: DOMRect {x: 205.40625, y: 343.875, width: 363.46875, height: 22, top: 343.875, …}
4: DOMRect {x: 123, y: 367.875, width: 53.578125, height: 22, top: 367.875, …}
length: 5
__proto__: DOMRectList

howManyLinesIsBest(divEl) {
    const rect0 = (divEl.getClientRects())[0];
    const width = rect0.width;
    const span = (divEl.getElementsByTagName("span"))[0];
    const lines = {};
    [].forEach.call(span.getClientRects(),
      v => {
        if (lines.hasOwnProperty(v.y)) {
          lines[v.y] += v.width;
          return;
        }
        lines[v.y] = v.width;
      }
    );
    const wideRects = Object.values(lines).filter(v => v > width/2);
    return wideRects.length > 1 ? wideRects.length : 1;
  }