Javascript 在另一个div上显示溢出文本的部分

HTML

测试。。。试验

JAVASCRIPT

<div id="element1"><p id="hello">test test test test ... test test test test</p></div>
<div id="element2"><p></p></div>

var-element=document.querySelector（'#element1'）；
if（（element.offsetHeight

---

我使用这个简单的javascript来检测我的段落中是否有文本溢出（高度是固定的）。但更具体地说，我想做的是，如果scrollheight大于offsetheight，则在另一个

上显示溢出部分的文本。（在本例中为element2）。javascript不应该很难，是吗？我在网上没有看到过类似的情况，也不可能理解这个问题……

将我的评论转换成一些代码：

• 将要拆分的文本存储到变量中
• 将文本拆分为若干部分（单词）
• 将逐字添加到第一个div，直到它已满
• 然后将以下单词添加到另一个div

下面是我使用您的html片段编写的代码：

var element = document.querySelector('#element1');
if( (element.offsetHeight < element.scrollHeight) || (element.offsetWidth < element.scrollWidth)){
   // my element have overflow
  element.style.background = "yellow";
}
else{
  //my element don't have overflow
}

函数addWord（word）{
//查询要测量的div和包含的段落
const element1=document.querySelector（'#element1'）；
常量p1=元素1.查询选择器（'p'）；
const element2=document.querySelector（'#element2'）；
常量p2=element2.querySelector（'p'）；
//测试div是否已满
if（（element1.offsetHeight

我的答案在很大程度上基于Fuzzzel的聪明想法，即迭代每个单词并将它们添加到第一个元素中，直到溢出为止。一般来说，这样的过程非常缓慢，会影响用户体验（如果文本有10000个单词会怎么样），但这是我能想到的唯一可能的方法

我的答案有什么不同：

    function addWord(word) {
        // Query the divs to measure and the containing paragraph
        const element1 = document.querySelector('#element1');
        const p1 = element1.querySelector('p');
        const element2 = document.querySelector('#element2');
        const p2 = element2.querySelector('p');

        // Test if the div is full
        if ((element1.offsetHeight < element1.scrollHeight) || (element1.offsetWidth < element1.scrollWidth)) {

            // If full, add the text to second div
            p2.innerHTML += ' ' + word;
        } else {

            // If not full add the text to first div
            p1.innerHTML += ' ' + word;
        }
    }

    // Execute this part after your DOM is loaded

    // Query text you want to put into the two divs
    let text = document.querySelector('#element1 p').innerHTML;

    // Split the text into words (roughly)
    let words = text.split(' ');

    // Empty the text you just loaded
    document.querySelector('#element1 p').innerHTML = '';

    // Add the text to the divs word by word
    for (let i = 0; i < words.length; i++) {
        addWord(words[i]);
    }

我的答案尊重元素的

填充

，如果元素已满，则不会插入其他单词，而Fuzzzzel则不会，如图所示

我使用

textContent

，这是在

HTML

节点中获取和设置文本的更快方法，因为它不尝试解析

HTML

这个答案比Fuzzzzel的快100倍

代码：

    function addWord(word) {
        // Query the divs to measure and the containing paragraph
        const element1 = document.querySelector('#element1');
        const p1 = element1.querySelector('p');
        const element2 = document.querySelector('#element2');
        const p2 = element2.querySelector('p');

        // Test if the div is full
        if ((element1.offsetHeight < element1.scrollHeight) || (element1.offsetWidth < element1.scrollWidth)) {

            // If full, add the text to second div
            p2.innerHTML += ' ' + word;
        } else {

            // If not full add the text to first div
            p1.innerHTML += ' ' + word;
        }
    }

    // Execute this part after your DOM is loaded

    // Query text you want to put into the two divs
    let text = document.querySelector('#element1 p').innerHTML;

    // Split the text into words (roughly)
    let words = text.split(' ');

    // Empty the text you just loaded
    document.querySelector('#element1 p').innerHTML = '';

    // Add the text to the divs word by word
    for (let i = 0; i < words.length; i++) {
        addWord(words[i]);
    }

知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责

如果以javascript获取字符串，则可以逐字填充第一个div（例如，在将原始字符串按空格拆分后），并在添加每个单词后检查您的条件。一旦条件满足，你就把下面的单词添加到另一个div中。非常有趣。。。我今天将尝试在我的php=）中实现这个想法，理论上听起来很好，但我无法让它工作..我收到一些“无法读取null属性'innerHTML'”错误。元素2中没有p标记，因此它可能无法工作，由于addWord添加到element2中的第一个p-tag中，因此我将您的想法精心设计成了我自己的答案，提供了一种稍微不同的方法。我一定会为你的出色工作提供赞誉和赞誉@fuzzel你是个天才。我勾选Angel的答案是为了帮助我的人。我认为他的方法对于大内容来说要快得多。但这太不公平了。你演得很聪明。尊敬老兄！这对我来说是个大问题。如果你有贝宝或类似的，我会非常乐意为你买啤酒！来自LDNTrue的欢呼声，textContent属性更快，正如您所说的，导致容器溢出的第一个单词应该已经添加到下一个容器中。我没有考虑到这一点。所以你的答案是更好/更好的。最快的方法很可能是使用CSS列在多个容器之间划分文本，但没有要求这样做；-）然而，这不是关于速度的优化，而是另外两个建议：1。在第一个单词不适合之后，在内部连接剩余的字符串并将其添加到第二个容器中。此解决方案跳过任何DOM操作，但第二个容器的操作除外。2.或者，以补偿的方式这样做。函数尝试添加给定的文本。如果不合适，将其分成两半，并将第一部分放在同一个函数中：。如果它确实合适，那么在下半场也要这样做。将适合的零件保存在容器内存中或从函数中返回。这总是需要最大的sqrt（n）次尝试。对不起，不能是sqrt（n）而是log2（n）。哇，伙计们，我印象深刻！这太神奇了。我在谷歌上翻了很多，想找到类似的东西。。非常感谢，我学到了一些东西！我很高兴你找到了解决问题的有效方法@Odjone。没有Fuzzel是不可能做到的！确保再次检查答案中的代码。我在p1.textContent=p1final.join（“”）下添加了一行代码，因为