Javascript 将段落的每一行用一个跨距括起来

我有一个

元素，它将显示一个没有换行符的段落，如示例中所示

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着包括Lorem Ipsum版本的Aldus PageMaker等桌面出版软件的发布而流行

在这里，文本将根据其容器的宽度拆分为若干行。我试图将每个自动调整大小的行包装到一个span元素中。但是我没有这样做，因为我们无法使用

\n

找到行的结尾。有什么方法可以实现这一点吗

---

注意-我在搜索时找到了这个问题的答案。但是questin与此不同，这里我有一个单行测试，没有换行符。但是上面的问题每行都有换行符，这应该是你想要的，或者接近它

function trimByPixel(str, width) {
    var spn = $('<span style="visibility:hidden"></span>').text(str).appendTo('body');
    var txt = str;
    while (spn.width() > width) { txt = txt.slice(0, -1); spn.text(txt + "..."); }
    return txt;
}

var stri = $(".str").text();

function run(){
  var s = trimByPixel(stri, $(".str").width()).trim()
  stri = stri.replace(s,"")
  $(".result").append("<span>"+s+"</span>");

  if(stri.trim().length > 0){
    run();
  }
}

run();

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着包括Lorem Ipsum版本的Aldus PageMaker等桌面出版软件的发布而流行

拆分行 为了能够计算何时有新行，我们必须首先知道句子的最后一个单词是什么时候。为了找出答案，我们将为每个单词添加一个标签。然后取每个单词的Y坐标。如果存在差异，我们知道新规则已经开始

//Openingtag&closingtag必须是字符串！！
函数拆分行（容器、openingtag、closingtag）{
//获取段落中的跨距
var span=container.children，
top=0，
//将tmp设置为字符串
tmp=''；
//在每个单词上加上跨距，现在我们使用标记，因为我们想保存5个字节：）
container.innerHTML=container.textContent.replace（/\S+/g，'$&'）；
//循环遍历每个单词（跨距）
for（设i=0；i

演示

函数拆分行（容器、opentag、closingtag）{
var span=container.children，
top=0，
tmp=''；
container.innerHTML=container.textContent.replace（/\S+/g，$&'）；for（让i=0；i

*{
字体系列：-苹果系统，BlinkMacSystemFont，'Segoe UI'，Roboto，Oxygen，Ubuntu，Cantarell，'Open Sans'，'Helvetica Neue'，Sans serif；
线高：22px；
}
h1{
字母间距：1px；
边框底部：1px实心#eaecef；
垫底：5em；
}
p{
字体大小：14px；
宽度：350px；
}
p span:n个孩子（偶数）{
颜色：#fff；
背景：#000；
}

---

TextSplitter您试图实现什么？我很惊讶这个问题的得票率竟然如此之高。为什么？MihaiT先生我解释了情况，没有分隔符来确定行的开始和结束位置，我在问题中提到了这一点。我如何尝试解决这种情况？在降级任何问题之前阅读问题您使用javascript/jquery提出了一个解决方案，但您没有提供任何代码向我们表明您已尝试自己解决问题。在您搜索解决方案和/或自己尝试解决方案后，询问SO应作为最后手段。（你应该在这里发布）我一直坚持拆分文本，我正在寻找解决方案，那么我如何发布代码？我是否需要在问题中发布愚蠢的代码，因为我知道这是错误的，那么你应该尝试更努力地搜索。一个简单的搜索让我找到了这个问题，它很好地解决了你的问题！我只是在寻找一个解决办法。谢谢代码中有错误-将“opentag”更改为“openingtag”。除此之外，它还非常有效：）