使用 Javascript 将 div 的内容分成两列

Question

我正在尝试找到一种方法来拆分一个 div 的内容并通过遵循逻辑过程将其拆分为两列。

对于逻辑过程，我的意思是我想或多或少地将内容分成两半，但不破坏第一列的最后一句话。

所以我想让完成第一列的最后一句话，而不是将另一部分拆分并打印在另一列中，这就是为什么它几乎从不“切成两半”的原因。

所以我想以这种方式保留我的第一列：

Lorem ipsum dolor sit amet, consectetur 肥胖精英。 虎杖 在 metus venenatis metus中的luctus orci 黄花菜

而不是通过将其切成两半可能会发生类似的事情：

第一栏： Lorem ipsum dolor 坐 amet, consectetur 肥胖精英。 虎杖 在 metus venenatis metus中的luctus orci 黄花菜

第二栏： mattis ...等（其余第二列）

这方面的文档真的很难找到，我已经找了一段时间了。

我试图遵循这个：

Splitting HTML into multiple columns with Javascript/jQuery

但目前它似乎没有分裂任何东西：

HTML

<div id="split">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent molestie felis eu nisl gravida, sed molestie tortor egestas. Integer a velit quis mauris vehicula sagittis nec in dui. Suspendisse potenti. In hac habitasse platea dictumst. Donec convallis pharetra diam, id rutrum purus porta eu. Morbi feugiat mauris sed viverra volutpat. Pellentesque aliquam, nibh ac accumsan vehicula, ex justo blandit quam, at rhoncus turpis neque id est.
</div>

JS

function textSplitter(){
}

textSplitter.prototype.LENGTH_TO_SPLIT=5000 //max chars in single line

textSplitter.prototype.split=function(){
    var contentDiv=document.getElementById("split"); // get an element
    var text=contentDiv.innerHTML; 
    var length= text.length; 
    if(length){
        var div1sbstr=text.substring(0,this.LENGTH_TO_SPLIT); //take a substring
        var div1=document.createElement("div");
        contentDiv.appendChild(div1); // append it
    }
    if(length>this.LENGTH_TO_SPLIT){
        var div2sbstr=text.substring(this.LENGTH_TO_SPLIT,this.LENGTH_TO_SPLIT*2);
        var div2=document.createElement("div");
        contentDiv.appendChild(div2);
    }
    if(length>this.LENGTH_TO_SPLIT*2){
        var div3sbstr=text.substring(this.LENGTH_TO_SPLIT*2,this.LENGTH_TO_SPLIT*3);
        var div3=document.createElement("div");
        contentDiv.appendChild(div3);
    }
}

有什么宝贵的想法吗？

Answer 1

此代码接收文本作为变量，根据需要将其分成小块并设置在变量中。然后将它们并排显示在 2 列中。

var text = `I'm trying to find a way to split the content of one div and split it into two columns by following a logic process. With a logic process, I mean that I'd like to split the content more or less in a half but without breaking the last sentence of the first column for example. o I'd like to let finish the last sentence of the first column and than split the other part and print it in the other column, this is why it is almost never "cut in half". Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur luctus orci in metus venenatis luctus orci in metus venenatis`,
  numberOfLineChars = 30;

var output = [];

for (var i = 0; i < text.length; i++) {
  var startPos = i;
  var spcePos = 0;
  for (var j = 0; j < numberOfLineChars; j++) {
    if (text[i] == " ") {
      spcePos = i;
    }
    i++;
    if (i >= text.length) break;
  }
  if (i < text.length) {
    i = spcePos - 1;
    output.push(text.substr(startPos, spcePos - startPos + 1) + "\n");
  } else {
    output.push(text.substr(startPos, text.length - startPos + 1) + "\n");
  }
}

var num1 = Math.floor(output.length / 2),
  firstColumn = "<div class='one'>",
  secondColumn = "<div class='two'>";
for (var i = 0; i < num1; i++) {
  firstColumn += `<p>${output[i]}</p>`;
}
firstColumn += "</div>";
for (var i = num1; i < output.length; i++) {
  secondColumn += `<p>${output[i]}</p>`;
}
secondColumn += "</div>"
$('#content').append(firstColumn).append(secondColumn);

p {
  text-align: justify;
}

.content {
  background: aqua;
  margin: auto;
  padding: 10px;
}

.one {
  display: block;
  padding: 10px;
  width: 40%;
  background: red;
  float: left;
}

.two {
  width: 40%;
  float: right;
  padding: 10px;
  background: black;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="content">

</div>

Answer 2

如果你不限于 JS，你可以使用 CSS columns。

Answer 3

您的代码中有一些（逻辑）错误，但这应该会让您走上正轨

• `split=function() {...}; 后缺少分号；
• textSplitter.prototype.LENGTH_TO_SPLIT=5000 且仅使用 443 个字符的文本；）
• ...

window.onload = function() {

function TextSplitter(){ }

TextSplitter.prototype.LENGTH_TO_SPLIT=200; // changed this to 200

TextSplitter.prototype.split=function(){
    var contentDiv=document.getElementById("split"); 
    var text=contentDiv.innerHTML; 
    var length = text.length;
    var sentences = text.split('.');  // split the paragraph into sentences

    // for simplicity I just gonna generate two divs
    if(length>this.LENGTH_TO_SPLIT){
        var div1sbstr = '';
        do {
            div1sbstr += sentences.shift() + '.'; // because of split() we need to add a dot
        } while(div1sbstr.length < this.LENGTH_TO_SPLIT) 

        var div2sbstr = sentences.join('.');
        
        var div1 = document.createElement("div");
        var div2 = document.createElement("div");
        
        div1.innerHTML = div1sbstr;
        div2.innerHTML = div2sbstr;

        // not making them child of <div id="split"> but of <body>
        document.getElementsByTagName('body')[0].appendChild(div1); 
        document.getElementsByTagName('body')[0].appendChild(div2);
    }
    };

var texsplit = new TextSplitter()
texsplit.split()

}

div {
padding: 10px;
}

<div id="split">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent molestie felis eu nisl gravida, sed molestie tortor egestas. Integer a velit quis mauris vehicula sagittis nec in dui. Suspendisse potenti. In hac habitasse platea dictumst. Donec convallis pharetra diam, id rutrum purus porta eu. Morbi feugiat mauris sed viverra volutpat. Pellentesque aliquam, nibh ac accumsan vehicula, ex justo blandit quam, at rhoncus turpis neque id est.
</div>

Answer 4

要分成 2 列，试试这个，

$(document).ready(function () {
        var textStr = $('#split')[0].innerText;
        var length = textStr.length;
        var halfLength = parseInt(length / 2);
        var div1 = document.createElement("div");
        var div1Str = textStr.substring(0, halfLength);
        if (textStr.substring((halfLength) + 1, 1) != ".")
            div1Str=div1Str.concat(textStr.substring((halfLength) + 1, textStr.indexOf(".", (halfLength) + 1) + 1));
        textStr=textStr.replace(div1Str,'');
        $('body').append("<div>" + div1Str + "</div>");
        if (textStr != "") {
            $('body').append("<div>" + textStr.substring(textStr.indexOf(".", (halfLength) + 1) + 2, length) + "</div>");
        }
    });