Javascript 查找换行元素中行的拆分方式

假设网页中有类似于

foobar

的内容。这可能会被渲染为

foo bar

或

取决于元素是否得到单词包装（这取决于其宽度和各种css属性的值，如

空白

，

分词

，

溢出包装

，等等）

有没有办法确定浏览器如何在这样一个元素中呈现文字的换行？i、 例如，我正在寻找返回类似于

[“foo”，“bar”]

的javascript代码（在包装发生的情况下）

似乎

getClientRects

为每行返回单独的框（它似乎仅适用于内联元素）。但我正在寻找一些也能提供文本信息的东西

我正在寻找返回类似[“foo”，“bar”]的javascript代码（在包装发生的情况下）

我没有相同的解决方案，但我有一个非常类似的想法。请参阅下面的代码段并检查代码，然后减小屏幕大小并再次检查代码。你会明白的

它将帮助您获得符合设备宽度的线条。{span class=“line-0”，span class=“line-1”}

var words=$（'#示例'）.text（）.replace（/\t/g'，）.replace（/\r/g'，）.replace（/\n/g'，）.replace（/\s+/g'，）.split（''）；
//控制台日志（文字）；
$（'#示例'）.html（''+words.join（''）+''）；
var行=[]；
$（'示例span'）。每个(
功能（即，e）{
var offsettop=$（e）.offset（）；
if（lines.indexOf（offsettop.top）=-1）{
线。推（偏置。顶部）；
}
$（e）.addClass（'line'+line.indexOf（offsettop.top））；
});
var行=[]；
$（'#示例span.line1'）.css（'background'，'red'）。每个（函数（i，e）{
line.push（$（e.html（））；
});
#示例{
直线高度：200%；
字号：2em；
文本转换：大写；
}

Foo-Bar
我不确定是否有一种方法可以使用DOM实现这一点，但这是我的解决方案：


let divs=document.querySelectorAll（'div'）；
对于（让div中的div）{
让wordBreak=[]；
const words=div.innerText.split（“”）；
div.innerText=单词[0]；
let beforeBreak=单词[0]；
让高度=俯视距离；
for（设i=1；i高度）{
高度=俯视距离；
wordBreak.push（在break之前）；
beforeBreak=单词[i]；
}否则{
beforeBreak+=''+字[i]；
}
}
wordBreak.push（在break之前）；
console.log（wordBreak）；
}
foo-bar
富吧
Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一个很好的例子
欧盟arcu。不，我不知道。佩伦特斯克ac奥迪奥舌拉。Donec sem dui，iaculis vel euismod a，
vulputate ac mi。纳姆·奥勒姆·内克。这是一个很好的例子。
在麦格纳的福斯，在奎斯安特的迪亚姆康莫多tincidunt。Donec ac dolor risus。福西布斯特里希汽车酒店
如果块级元素仅包含纯文本，则可以使用两个范围的DOMRect对象获取自动换行的文本。在元素内创建textnode的范围（
range
）以获取行的文本，在增加范围的结束位置时，创建另一个范围（
hTracker
）以保留DOMRect对象的高度。当范围高度发生变化时，将上一个
范围
中的文本存储到一个数组中，并将
范围
的起始位置设置到当前行的末尾。代码如下：


功能显示线（e）{
常数el=e.目标，
node=el.firstChild，
range=document.createRange（），
len=e.target.textContent.length，
文本=[]；
让我们一起来吧，老友记，老友记；
范围。选择节点内容（el）；
range.collapse（）；
hTracker=range.cloneRange（）；
hTracker.setEnd（节点1）；
oldY=hTracker.getBoundingClientRect（）.height；
for（设n=0；noldY | | n==len-1）{
//行更改后，恢复上一个范围（不是在文本末尾时）
range.setEnd（节点，n-（n！==len-1））；
//存储行的文本
text.push（range.toString（））；
//将范围的起点设置为上一行的终点
range.setStart（节点，n-1）；
oldY=y；
}
}
控制台日志（文本）；
};
document.addEventListener（“单击”，显示行）

取决于元素是否得到单词包装（这取决于其宽度和各种css属性的值，如空格、分词、溢出包装等）。有没有办法确定浏览器是如何在这样的元素中呈现文本的
关于单词包装？i、 例如，我正在寻找返回类似[“foo”，“bar”]的javascript代码（如果确实发生了包装）。getClientRects似乎为每一行返回单独的框（它似乎适用于内联）
元素）。但我正在寻找一些也能提供文本信息的东西。
如果您解释一下您的用例，可能会有所帮助。不完全清楚您需要什么TML换行符取决于宽度，字符之间的空格使浏览器认为它是一个字如果块级元素只包含纯文本，则很容易找到。但我不知道如何使用这个列表从框中获取文本。忘记给链接
foo
bar