Question

说，我在页面上有2个div元素（让div1和div2）。我是动态获取内容的。内容是文本，我希望内容以这样的方式填充2 div元素，当div1用完空间时，内容显示在div2中。作为类比，它类似于在笔记本电脑上工作，笔记本电脑的整个表面都是页面，div1和div2分别是左右两侧。一旦页面的一侧完成，您将继续下一步，依此类推。

其中一种方法可能是分割文本并设置每个div的单词数限制，这将导致从div1变为2，依此类推。

我看过分页，这不是我要找的东西。

但有没有更好的方法来实现这一目标？也许喜欢使用div元素的height属性来触发事件或类似的东西？还是其他任何建议？

Answer 1

您可以使用此示例中的代码，该代码具有4个div元素，这些元素具有固定大小，并排显示（请参阅CSS），并且其中包含第一个{{1}中的所有文本}。代码将根据需要将文本重新分发到下一个div，以避免溢出：

＆＃13;

div

＆＃13;

$(function() {
    // Take all words from first div and let them overflow into any next div
    var allwords = $('div.box').text().split(/\s+/);
    $('div.box').each(function (index, div)  {
        var text = '';
        var $div = $(div);
        var height = Math.round($div.height());
        allwords.slice().some(function (part, i) {
            $div.text(text + (i ? ' ': '') + part); // try, and see what we get
            // Detect overflow: when so, exit loop
            if ($div.prop('scrollHeight') > height) return true;
            text = $div.text();
            allwords.shift();
        });
        // Restore text to last non-overflowing text
        $div.text(text);
    });
});

＆＃13;

.box { width:100px; height:100px; border: 1px solid; display: inline-block; float: left }

＆＃13;

Answer 2

您可以通过以下函数检测div何时溢出：

if (
    element.offsetHeight < element.scrollHeight
    || element.offsetWidth < element.scrollWidth
)
{
    // Overflow
}
else
{
    // No overflow
}

你可以创建一个函数，从第一个div到第二个div逐步分离内容，直到溢出消失。

Answer 3

这是一个奇怪的解决方案，但它有效！我不推荐在生产网站上使用它：P

＆＃13;

$(function() {
  
  function normalize() {
    
      $('#div2').text('');
      
      while ($('#div1')[0].scrollHeight > $('#div1')[0].clientHeight) {

      // get words of the text
      var words = $('#div1').text().split(' ');

      // get last word
      var lastWord = words.slice(-1);

      // pour it to div2
      $('#div2').text($('#div2').text() + lastWord);

      // remove it from the array
      words.length = words.length - 1;

      // and pour the rest back to div1
      $('#div1').text(words.join(' '));

    }
  }
  
  $('button').click(normalize);
  
  $('textarea').change(function() {
    $('#div1').text($('textarea').val());
  });
  
});

＆＃13;

#div1 {
  width: 100px;
  height: 100px;
  background-color: blue;
  display: block;
  word-break: break-all;
}

#div2 {
  margin-top: 100px;
  width: 100px;
  height: 200px;
  background-color: green;
  display: block;
  word-break: break-all;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea>
  aaaa bbbb ccccccccc aaa bbb cccccccccccccc aa bbbbbb cccc aaaaaaaaaaaaaaa bbb ccccc aaaa bbb cccccccc aaaaaaa bbbbbbbbbbbbbbbb ccccc
</textarea>
<button>normalize</button>
<hr>
<div id="div1">
  aaaa bbbb ccccccccc aaa bbb cccccccccccccc aa bbbbbb cccc aaaaaaaaaaaaaaa bbb ccccc aaaa bbb cccccccc aaaaaaa bbbbbbbbbbbbbbbb ccccc
</div>
<div id="div2">

</div>

＆＃13;

Answer 4

我将尝试回调函数，你可以淡化第一个div而不是调用填充第二个的函数：

           $(".div1").fadeOut(200,callbackFunction(){$(".div2").html("some text")});

Answer 5

此外，您可以像textarea

那样修正<textarea maxlength="50">的文字限制

50可以替换为任何数字。即使您需要动态长度，也可以使用JS来执行此操作。

使用JS计算角色数量，达到限制后，将focus切换为其他textarea。

AngularJS或任何此类MVC将有助于轻松解决此问题。

将内容从1个元素切换到下一个元素

5 个答案: