关于javascript：拆分文本[没有


Split text [without
or <br>] on visible line breaks with JS

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

"lorem ipsum dolor sit amet，consetetur sadipscing eliter，sed diam voluptua"在小跨度内断裂，例如：

"Lorem Ipsum Dolor Sit Amet，[休息]康塞特·萨迪普辛格精英[休息]塞迪亚姆沃卢普塔"

我需要拆分换行符上的行，或者获取"隐藏换行符"字符的索引。

https://jsfiddle.net/derlangevontetris/x63ldcez/

HTML：

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

JS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
(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));

号

结果：

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

为什么我需要这个：

https://jsfidle.net/derlangevontetris/xgbsvpdy/

当我添加s时，装饰中断polyfill"decofill"在边缘上起作用。但是在响应视图上，当我添加html行中断硬编码时，会遇到问题。因此，我需要在客户端添加它们。

相关讨论

我喜欢你的问题！这是一个很大的挑战，我喜欢挑战！！

我将用我自己的技巧来回答这个问题(通过pure js和第一次——没有相同的答案)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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));
1
2
3
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam voluptua

You can change the"width" and see the result.

号

  • 结果1是一个对象，每个键都是相关行的数目，值是该行的字。

  • 结果2是一个对象，每个键都是行号，值是行本身。