代码之家 › 专栏 › 技术社区 › Crashy

使用Javascript将div的内容拆分为两列

multiple-columns javascript

Crashy · 技术社区 · 6 年前

我试图找到一种方法,通过遵循逻辑过程将一个div的内容拆分为两列。

对于逻辑过程,我的意思是,我希望将内容或多或少地分成两半,但不要打断第一列的最后一句话。

因此,我想让第一列的最后一句话写完,然后将另一部分拆分并在另一列中打印出来,这就是为什么它几乎从不“一分为二”。

因此,我想以这种方式保留我的第一个专栏:

Lorem ipsum dolor-sit 阿梅特,康塞特图尔一位精英。虎鱼在metus venenatis 梅特斯的卢克图斯·奥奇马蒂斯威尼斯人

而不是将其切成两半可能发生的类似情况:

第一列: Lorem ipsum dolor-sit 阿梅特,康塞特图尔一位精英。虎鱼在metus venenatis 梅特斯的卢克图斯·奥奇维内那提斯

第二列: mattis。。。etc(其余第二列)

很难找到关于这方面的文档,我已经搜索了一段时间了。

我试图做到这一点:

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

有什么好主意吗?

4 回复 | 直到 6 年前

Saeed 6 年前

这段代码接收一个文本作为变量,根据需要将其拆分成小块,然后在变量中进行设置。然后在两列中并排显示它们。

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>

mycaravam 6 年前

如果您不局限于JS,那么可以使用CSS columns 。

noob 6 年前

代码中有一些(逻辑)错误,但这应该会让您走上正确的轨道

'split=function(){…}后缺少分号;
文本拆分器。原型LENGTH\u TO\u 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>

Arulraj 6 年前

要拆分为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>");
        }
    });