不适合此案例的解决方案

Question

我目前正在尝试使用单个<div>将大文本拆分为两列，这两列具有不同的宽度。 example of what i want to create

你可以说，将你的文本分成两个<div>，这是不可能的，因为我也希望能够在必要时调整宽度。

假设我的HTML文件如下所示：

<style>
    #main-article{
        width: 100%;
        column-count:2;
        column-gap: 10vw;
        // webkit & moz stuff about columns
    }
</style>
<article id="main-article">
    really long text devided into two columns...
</article>

我不介意是否需要使用javascript或JQ将文本分成两个div

不适合此案例的解决方案

注释中的mentioned sollution在我的情况下不起作用，因为这会导致文本隐藏在溢出中请注意，此屏幕截图中的绿色类似于可见文本 example

Answer 1

使用2个div并通过创建单词数组并根据宽度百分比查找索引来分割文本

var $article = $('#main'),
  words = $article.text().split(' ');

function setContent(leftPercent) {
  $article.html('<div id="main-left"></div><div id="main-right"></div>')
  var wordSplitIndex = Math.ceil((leftPercent / 100) * words.length),
    leftWords = words.slice(0, wordSplitIndex).join(' '),
    rightWords = words.slice(wordSplitIndex).join(' ');

  $('#main-left').width(leftPercent + '%').text(leftWords);
  $('#main-right').width((100 - leftPercent) + '%').text(rightWords)
}


$('button[data-left-percent]').click(function() {
  var leftPercent = $(this).data('left-percent')
  setContent(leftPercent)
})

#main {
  display: flex
}

#main>div {
  padding: 10px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-left-percent="20">
left 20%
</button>
<button data-left-percent="60">
left 60%
</button>
<button data-left-percent="80">
left 80%
</button>


<article id="main">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
  ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
  duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

</article>

Answer 2

您只需要传递在html中定义的相同选择器。（将#article更改为#main-article）。请查看https://jsfiddle.net/subirbiswas/f8pb17gb/

Answer 3

试试这段代码。我也包含了bootstrap版本4，以确保它具有响应性。

#article {
  width: 100%;
  column-count: 2;
  column-gap 10vw;
  margin: 1rem;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <article id="article">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
      ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
      augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</article>

  </div>
</div>

Answer 4

感谢charlietfl

这种解决方法是因为他的溶解，请注意，在此codepen示例中，它在加载时不起作用，但如果您在浏览器中运行它确实正常工作。

    var allcol = document.getElementsByClassName('col');
    var current = allcol[0];
    var one = allcol[0];
    var two = allcol[1];
    var txt = current.innerHTML;

    function ballance() {
        curr = allcol[0];
        var temp = txt;
        curr.innerHTML = "";
        one.innerHTML = "";
        two.innerHTML = "";
        var wrdArr = temp.split(' ');
        var i = 0;

        overflew = function(x) {
            var div = document.getElementById(x.id);
            return div.scrollHeight > div.clientHeight;
        }
        for (a in wrdArr) {
            curr.innerHTML = curr.innerHTML + (wrdArr[a] + ' ');
            if (overflew(curr)) {
                i++;
                curr = allcol[i];
            }
        }
        i = 0;
    }
    var slider = document.getElementById("range");
    slider.oninput = function() {
        one.style.width = (slider.value - 1) + "%";
        two.style.width = (100 - slider.value - 1) + "%";
        ballance();
    }
    ballance();

.col {
    height: 300px;
    float: left;
}

#col1 {
    width: 59.5%;
    height: 300px;
    margin-right: 1%;
}

#col2 {
    width: 39.5%;
}

#range {
    width: 100%;
}

<h3> slider to adjust the width</h3>
<input type="range" min="1" max="100" value="60" class="slider" id="range">
   <div class="col" id="col1">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio corporis necessitatibus excepturi provident ex repellat maiores perferendis dignissimos, deleniti quisquam at laudantium id quod distinctio libero in similique deserunt esse. Perferendis tenetur aliquam maiores itaque laudantium sapiente ad dolor quibusdam, impedit numquam voluptatibus temporibus esse dolores harum labore reprehenderit, neque inventore delectus, iure amet blanditiis. Hic facere assumenda, quae illum! Consequatur dolorum necessitatibus cum voluptatem, adipisci fugiat reiciendis nesciunt hic! Molestiae esse corporis omnis earum blanditiis maiores nam rerum, cupiditate, repudiandae recusandae inventore. Delectus saepe fuga eius quaerat! Quisquam, aperiam. Aliquam corporis omnis quis quibusdam cupiditate doloremque. Temporibus cumque ratione rerum ab sunt est quam quisquam id. Quam quasi, consequatur dignissimos, suscipit officiis qui voluptatibus consequuntur officia accusamus repellendus ab. Modi dolore dolorum facilis vitae dolores nemo sunt repellendus saepe distinctio voluptate consectetur minus eaque tenetur eligendi aliquid cum voluptatem praesentium quasi sed soluta, debitis possimus quae, nesciunt similique, molestias.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio corporis necessitatibus excepturi provident ex repellat maiores perferendis dignissimos, deleniti quisquam at laudantium id quod distinctio libero in similique deserunt esse. Perferendis tenetur aliquam maiores itaque laudantium sapiente ad dolor quibusdam, impedit numquam voluptatibus temporibus esse dolores harum labore reprehenderit, neque inventore delectus, iure amet blanditiis. Hic facere assumenda, quae illum! Consequatur dolorum necessitatibus cum voluptatem, adipisci fugiat reiciendis nesciunt hic! Molestiae esse corporis omnis earum blanditiis maiores nam rerum, cupiditate, repudiandae recusandae inventore. Delectus saepe fuga eius quaerat! Quisquam, aperiam. Aliquam corporis omnis quis quibusdam cupiditate doloremque. Temporibus cumque ratione rerum ab sunt est quam quisquam id. Quam quasi, consequatur dignissimos, suscipit officiis qui voluptatibus consequuntur officia accusamus repellendus ab. Modi dolore dolorum facilis vitae dolores nemo sunt repellendus saepe distinctio voluptate consectetur minus eaque tenetur eligendi aliquid cum voluptatem praesentium quasi sed soluta, debitis possimus quae, nesciunt similique, molestias.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio corporis necessitatibus excepturi provident ex repellat maiores perferendis dignissimos, deleniti quisquam at laudantium id quod distinctio libero in similique deserunt esse. Perferendis tenetur aliquam maiores itaque laudantium sapiente ad dolor quibusdam, impedit numquam voluptatibus temporibus esse dolores harum labore reprehenderit, neque inventore delectus, iure amet blanditiis. Hic facere assumenda, quae illum! Consequatur dolorum necessitatibus cum voluptatem, adipisci fugiat reiciendis nesciunt hic! Molestiae esse corporis omnis earum blanditiis maiores nam rerum, cupiditate, repudiandae recusandae inventore. Delectus saepe fuga eius quaerat! Quisquam, aperiam. Aliquam corporis omnis quis quibusdam cupiditate doloremque. Temporibus cumque ratione rerum ab sunt est quam quisquam id. Quam quasi, consequatur dignissimos, suscipit officiis qui voluptatibus consequuntur officia accusamus repellendus ab. Modi dolore dolorum facilis vitae dolores nemo sunt repellendus saepe distinctio voluptate consectetur minus eaque tenetur eligendi aliquid cum voluptatem praesentium quasi sed soluta, debitis possimus quae, nesciunt similique, molestias.
</div>
<div class="col" id="col2">

</div>

有一个div有两个不同宽度的列

不适合此案例的解决方案

4 个答案:

感谢charlietfl