将多行文本拆分为特定宽度的行

Question

我一直在尝试使用不同宽度的多个段落，但每次换行时，后面的行都会进入一个新段落<p></p>。我需要其中四个，我以后可以独立设计。 这是我想要实现的截图，例如：

here is the original question where I found the original script.

我想做的事：

我已经设法对其进行了改编并对其进行了相当多的理解，以使其在线条都相同的情况下工作。基本上：

 <p style="width:700px">I am some ra</p>
 <p style="width:700px">ndom text. I</p>
 <p style="width:700px">am Some text</p>
 <p style="width:700px">.blabla</p>

但现在我面临一个问题：

我想为我的 css 中的各个行指定不同的宽度，以便脚本完美地打破它们。换句话说：一行文本占据了div paragraph 的所有宽度，剩余的文本移动到另一个段落中（例如#text2），直到我们达到四个div paragraphs.

类似的东西：

<p style="width:50px">I am some ra</p>
<p style="width:900px">ndom text. I</p>
<p style="width:800px">am Some text</p>
<p style="width:1000px">.blabla</p>

编辑： 到目前为止有一些进展。文本似乎与之前段落的宽度有关。

这里是项目：

    var p = document.getElementById("p");
    var menu = document.getElementsByClassName("menu");
    var width = p.clientWidth;
    var parent = p.parentNode;
    var line = document.createElement("span");
    line.style.display = "inline-block";
    line.style.visibility = "hidden";
    var content = p.innerHTML;
    document.body.appendChild(line);
    var start = 0;
    var i = 1;
    let run = 1;
    while (i < content.length) {
      line.innerHTML = content.substring(start, i);
      console.log(i + " " + content.length);
      console.log("#text" + run + " width: " + menu[run].clientWidth);
      console.log("run: " + run);
      if (line.clientWidth > menu[run + 1].clientWidth) {
        var newp = document.createElement("p");
        newp.id = "text" + run;
        newp.className = "menu";
        newp.innerHTML = content.substring(start, i - 1);
        parent.insertBefore(newp, p);
        start = i - 1;
        i = start + 1;
        run++;
      } else {
        i++;
      }
    }
    newp = document.createElement("p");
    newp.id = "textbis" + run;
    newp.className = "menu";
    newp.innerHTML = content.substring(start);
    parent.insertBefore(newp, p);
    parent.removeChild(p);

div {
  word-break: break-all;
  background-color: lightblue;
  width: 700px;
}
p {
  background-color: lightgreen;
}
#text0 {
  width: 50px;
}

#text1 {
  width: 50px;
}

#text2 {
  width: 200px;
}

#text3 {
  width: 500px;
}

#text4 {
  width: 700px;
}

    <div>
      <p class="menu" id="text1"></p>
      <p class="menu" id="text2"></p>
      <p class="menu" id="text2"></p>
      <p class="menu" id="p">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe,
        aliquam? Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Quibusdam quaerat iste earum quos eligendi atque aliquam veniam facilis
        quis ducimus. Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Iure, quisquam! Temporibus consequuntur laboriosam quos odio maxime
        iusto at dolore quod ipsa eaque voluptas mollitia, vel odit inventore
        sapiente aut!
      </p>
    </div>

Answer 1

就性能而言，这可能不是最佳选择，但这是一种方法。

let textarea = document.querySelector("textarea");
let output   = document.querySelector("textarea + div");

let widths = [100, 450, 400, 500, 9999];

textarea.addEventListener("input", () => {
    output.innerHTML = null;
    console.time("split took");
    let lines = splitTextByLineWidths(textarea.value, widths);
    console.timeEnd("split took");
    lines.forEach((line, i) => {
        let p = document.createElement("p");
        if (widths[i] < window.innerWidth) {
            p.style.width = widths[i] + "px";
        }
        p.textContent = line;
        output.append(p);
    });
});
textarea.dispatchEvent(new Event("input"));

function splitTextByLineWidths(text, lineWidths) {
    let lines = [];
    let renderer = document.createElement("div");
    renderer.style.position = "absolute";
    renderer.style.left = window.innerWidth * -3 + "px";
    renderer.style.top = window.innerHeight * -3 + "px";
    document.body.appendChild(renderer);
    lineWidths.forEach(lineWidth => {
        let measure = document.createElement("div");
        measure.style.display = "table";
        measure.textContent = "dummy";
        renderer.appendChild(measure);
        let lineHeight = measure.offsetHeight;
        let activeText = text;
        measure.textContent = activeText;
        measure.style.width = lineWidth + "px";
        let height = measure.offsetHeight;
        while (height > lineHeight) {
            activeText = activeText.slice(0, -1);
            measure.textContent = activeText;
            height = measure.offsetHeight;
        }
        lines.push(activeText);
        text = text.slice(activeText.length);
    });
    renderer.remove();
    return lines;
}

textarea + div {
    background-color: lightblue;
    padding: 1em;
}
textarea + div p {
    background-color: peachpuff;
}

<textarea cols="100" rows="6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius nisi purus, in dignissim justo egestas et. Suspendisse suscipit, metus vitae facilisis cursus, diam est malesuada tellus, eu viverra risus sapien nec neque.</textarea>
<div></div>

可以通过使用更智能的方式修剪文本来进一步改进此方法。目前，它正在修剪单个字符并检查文本是否溢出第一行。这是一项昂贵的操作。

人们可以设计一种方法来增加修剪长度，而不是单向（仅修剪），当文本下溢宽度时，可以双向（修剪和增长/放回）。