Разделите содержимое div на два столбца с помощью Javascript - PullRequest
Новая
       13

Разделите содержимое div на два столбца с помощью Javascript

0 голосов
/ 08 мая 2018

Я пытаюсь найти способ разделить содержимое одного элемента div и разделить его на два столбца, следуя логическому процессу.

Под логическим процессом я имею в виду, что я хотел бы разделить содержимое более или менее пополам, но, например, не разбивая последнее предложение первого столбца.

Так что я бы хотел закончить последнее предложение первого столбца, а затем разбить другую часть и распечатать его в другом столбце, поэтому он почти никогда не «разрезается пополам».

Итак, я бы хотел сохранить свой первый столбец таким образом:

Lorem ipsum dolor sit Amet, Concetetur жадный элит. Curabitur luctus orci в метус вененатис luctus orci в метусе venenatis mattis

вместо чего-то подобного, что может произойти, если разрезать его пополам:

Первый столбец: Lorem Ipsum Dolor Sit Amet, Concetetur жадный элит. Curabitur luctus orci в метус вененатис luctus orci в метусе venenatis

Второй столбец: Маттис ... и т. д. (второй отдых)

Действительно трудно найти документацию по этому вопросу, я долго искал.

Я пытался следовать этому:

Разделение HTML на несколько столбцов с помощью 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 ]

0 голосов
/ 08 мая 2018

Этот код получает текст как переменную, разбивает его на маленькие кусочки и устанавливает переменные. Затем покажите их в 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>
0 голосов
/ 08 мая 2018

в вашем коде есть некоторые (логические) ошибки, но это должно привести вас на правильный путь

  • пропущена точка с запятой после `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>
0 голосов
/ 08 мая 2018

Чтобы разделить на 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>");
        }
    });
0 голосов
/ 08 мая 2018

Если вы не ограничены JS, вы можете использовать CSS колонки .

...