8

CSS

.page{ 
      width: 275px;
      hight: 380px;
      overflow: auto;
     }

HTML

<div class="page">dynamic text</div>

当动态文本溢出div的固定高度时如何创建一个新的div？

例子：

<div class="page">Some dynamic texts will appear here</div>

当动态文本溢出div的固定高度时，上面的内容会是这样的。

<div class="page">Some dynamic</div>
<div class="page">texts will</div>
<div class="page">appear here</div>

我试过在 PHP 中使用 wordwrap 函数，wordwrap($dynamic_text, 600, '</div><div class="page">');它可以运行，但是从 Ms.Words 复制字符时出现问题。因此，通过检测溢出的文本，将其剪切，然后将其粘贴到新的 div 元素中是更好的解决方案，我猜。但是，我不知道如何使用 JQuery 或 Javascript 来执行此解决方案。

有任何想法吗？提前致谢！

4

2 回答 2

2

你可以做到，而且不仅仅是几行代码。一个非常有经验的开发人员花了几天时间。抱歉，无法分享代码。

Javascript：将整个内容放入 div 中。您可以将其隐藏或在 DOM 之外一段时间。遍历 div 的孩子。找到 top+scrollHeight 超过 div 高度的那个。递归遍历它。最终，您将找到不适合的不可分割元素，例如图像，或者在文本节点中找到分割文本的位置。从 div 中删除该部分和所有其他元素。将它们添加到新的。

有很多细节要解决，所以并不简单。但可行。

于 2012-12-25T08:03:26.757 回答
1

我今天在寻找答案时有类似的工作，但似乎没有任何直截了当的事情。

虽然我正在使用Array.reduce()您应该能够使用Array.forEach()您喜欢的任何其他迭代代码来执行此操作。

words.reduce(function(acc, value)

这是通过计算如果我们在实际渲染之前添加另一个单词，元素是否会溢出来完成的。这里的 hacky 是在其中添加另一个block元素visibility: hidden。

element.innerHTML = '<div style="visibility: hidden; height: 100%; width=100%">' + textToBeAdded + '</div>';

这样，block元素仍然采用其父元素尺寸，并且可以检查父元素是否溢出。

检查溢出的方法是将元素的滚动高度与其高度进行比较：

if (element.scrollHeight > element.offsetHeight)

如果它溢出，我们保持原样并创建一个新元素并将当前value（单词）放入迭代中。然后我们将它附加到与前一个元素相同的 DOM 树上（作为其父元素的子元素......就像有一个新兄弟）

var newPageEl = document.createElement('div');
newPageEl.classList = 'page';
newPageEl.textContent = word;
parentElement.appendChild(newPageEl);

希望这是有道理的。

var page = document.getElementsByClassName('page')[0];

if (page.scrollHeight > page.offsetHeight) {
  // is overflowing
  fixOverflow(page);
}

function fixOverflow(element) {
  var words = element.textContent.split(' ');
  // delete previous text content
  element.textContent = '';

  words.reduce(function(acc, value) {
    // store current element's text
    var currentElementText = element.textContent.toString().trim();
    var textToBeAdded = currentElementText + ' ' + value;

    element.innerHTML = '<div style="visibility: hidden; height: 100%; width=100%">' + textToBeAdded + '</div>';
 
    if (element.scrollHeight > element.offsetHeight) {
      // is overflowing with the new word
      element.innerHTML = "";
      // leave the last page element as is
      element.textContent = currentElementText;
      // create another element with the new value to be added
      // ** IMPORTANT replace the memory of the previous element variable 
      element = createPageElement(value);
      // add it to the same DOM tree as the previous page element
      page.parentElement.appendChild(element); // could also be document.getElementById('page-container').appendChild(element);
    } else {
      // if not overflowing add another word 
      element.innerHTML = currentElementText + ' ' + value;    
    }
  }, "");
}

function createPageElement(text) {
  // create element with class page
  var newPageEl = document.createElement('div');
  newPageEl.classList = 'page';
  newPageEl.textContent = text;
  return newPageEl;
}

于 2019-04-12T17:55:52.620 回答