使用 JS 在可见换行符处拆分文本 [不带 \n 或 <br>]答案

【问题标题】：Split text [without \n or <br>] on visible line breaks with JS使用 JS 在可见换行符处拆分文本 [不带 \n 或 <br>]
【发布时间】：2019-02-17 01:38:36
【问题描述】：

我有一个最大宽度的跨度和一个没有 \n 或
的长文本。是否可以通过JS获取自动生成的换行符的位置？

“Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam voluptua”在小跨度内中断，例如这样：

“Lorem ipsum dolor sit amet，[break]
consetetur sadipscing elitr,[break]
sed diam voluptua"

我需要在换行符处拆分行或获取“隐藏换行符”字符的索引。

https://jsfiddle.net/DerLangeVonTetris/x63Ldcez/

HTML：

<h1 class="multiline-headline">
    <span class="decoration-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam voluptua</span>
</h1>
<div class="preview"></div>

JS：

(function () {
    var span = document.getElementsByTagName('span')[0],
        spanLines = [];

    // do magic start

    spanLines.push(span.innerText.slice(0,27));
    spanLines.push(span.innerText.slice(28,56));
    spanLines.push(span.innerText.slice(57));

    // do magic end

    document.getElementsByClassName('preview')[0].innerText = JSON.stringify(spanLines);    

}(window));

结果：

["Lorem ipsum dolor sit amet,","consetetur sadipscing elitr,","sed diam voluptua"]

为什么我需要这个：

https://jsfiddle.net/DerLangeVonTetris/xgbsvpdy/

当我添加
s 时，装饰中断 Polyfill“decofill”在 Edge 上工作。但是在响应式视图上，当我添加硬编码的 HTML 换行符时会遇到问题。因此我需要在客户端添加它们。

【问题讨论】：

你为什么需要这个？
除非您有等宽字体，否则很难做到这一点，但请访问 help centre 以查看该站点的 on topic 是什么类型的问题 - 目前是您的问题过于宽泛，因此离题
我添加了一些信息
你检查我的答案了吗？它工作得很好，看看它:)

标签： javascript split line-breaks

【解决方案1】：

我喜欢你的问题！它有很大的挑战，我喜欢挑战！

我将使用我自己的技巧来回答这个问题（通过pure js 并且第一次 - 没有相同）：

function MyOwnSplit(myTextDiv){
  var res = myTextDiv.innerHTML.trim().split(/ +/).map(function(t){
    return "<span>"+t+" </span>";
  });
  var mainText = myTextDiv.innerHTML;
  var fakeDiv=document.createElement("div");
  fakeDiv.innerHTML=res.join("");
  fakeDiv.setAttribute("style", myTextDiv.getAttribute("style"));
  fakeDiv.style.visibility='hidden';
  myTextDiv.insertAdjacentElement("afterend", fakeDiv);
  var finalRes={}, l=0, prvCTop=-Infinity;
  fakeDiv.childNodes.forEach(function(c){
    var top = c.offsetTop, A;
    if(top!=prvCTop) {
      l+=1;
      finalRes[l]=(A=[]);
      prvCTop=top;
    } else A=finalRes[l];
    A.push(c.innerHTML.trim());
  });
  fakeDiv.parentElement.removeChild(fakeDiv);
  return finalRes;
}
var res=MyOwnSplit(document.querySelector(".my-text"));
console.log(JSON.stringify(res));
//or getting all lines:
var r={};
for(var lN in res) {r["Line"+lN]=res[lN].join(" ");};
console.log(JSON.stringify(r));

<div style='width: 110px; border: solid 1px #f0f0f0' class='my-text'>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam voluptua
</div>
<b>You can change the "width" and see the result.</b>

result1 是一个对象，每个键是相关行的数量，值是该行的单词。
result2 是一个对象，每个键是行号，值是行本身。

【讨论】：