Question

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

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

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

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

Lorem ipsum dolor坐 amet，consectetur adipiscing elit。 Curabitur luctus orci 在metus venenatis 在metus中的luctus orci venenatis mattis

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

第一栏： Lorem ipsum dolor坐 amet，consectetur adipiscing elit。 Curabitur luctus orci 在metus venenatis 在metus中的luctus orci venenatis

第二栏： 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

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

Answer 2

您的代码中存在一些（逻辑）错误，但这会让您走上正确的轨道

在`split = function（）{...};
textSplitter.prototype.LENGTH_TO_SPLIT = 5000，仅使用443个字符的文字;）
...

＆＃13;

text[]

＆＃13;

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()

}

＆＃13;

div {
padding: 10px;
}

＆＃13;

Answer 3

要拆分为2列，请尝试此操作，

r360._cameraPosition = [0, 3, 0]; //[x, y, z], default ist [0, 0, 0]

Answer 4

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

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>

使用Javascript

4 个答案: