用javascript中的占位符文本动态且完全地填充div答案

【问题标题】：Dynamically and completely fill a div with placeholder text in javascript用javascript中的占位符文本动态且完全地填充div
【发布时间】：2014-04-06 08:09:56
【问题描述】：

我想用占位符文本填充一个 div。

我有一个 100% 宽 + 高的 div。由于许多外形因素，此高度和宽度将根据用户分辨率而变化。我如何用 lorem ipsum 动态填充该 div。另外，如果窗口大小发生变化，我将如何重新计算？ 我知道我可以通过复制粘贴和隐藏溢出手动执行此操作，但我宁愿在 javascript 中实现此操作

JSFiddle

css

    html,body {
        /*background:#edecec;*/
        height: 100%;
    }
    .block-text{
        text-align: justify;
        font-size: 8px;
        font-color: rgba(88,89,91, 1);
        font-family: georgia;

        line-height: 7px;
    }

html

    <div class="block-text">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, eius, ab, molestiae praesentium hic quia quaerat culpa quas consectetur dolor veritatis vel voluptas minus laborum minima quis dolorum necessitatibus tempora.
        </p>

    </div>

【问题讨论】：

快速猜测我要测试：在 .block-text 中有一个子元素，在每一步中填充该子元素并检查它的高度是否大于父元素，然后中断.那是你可以使用的东西吗？
我会创建 div 的屏幕外（可见，但对用户不在屏幕上）副本，并继续向其中添加文本，直到它不超过可见 div 的尺寸。然后将内容复制过来。

标签： javascript jquery html css

【解决方案1】：

http://jsfiddle.net/h54tP/1/

var bool = true;
var maxHeight = $('.block-text').height();


do {
    $('.container').append("<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit.   Tempore, eius, ab, molestiae praesentium hic quia quaerat culpa quas consectetur dolor veritatis vel voluptas minus laborum minima quis dolorum necessitatibus tempora. </p>");
    if ($('.container').height() > maxHeight) bool = false;
} while (bool);

在这里，如我的评论中所述。文本框中的一个包装元素，块文本设置为 100% 高度和一个小的 while 循环就可以了。

小提示：调整窗口大小时，这不会做任何事情。但是，为此，您可以在 window-size-change 函数中调用整个代码。

此外，这允许文本略大于屏幕。如果你想让它稍微小一点，那就做吧

$('.container').children().last().hide();

在“if”子句中。

【讨论】：

如果窗口大小发生变化怎么办？检测和重做的最佳方法是什么
把整个东西放在一个 $(window).resize(function() {}); :) 或者，最有可能的是，将它放在一个命名函数中，该函数在文档就绪时调用一次，然后在 $(window).resize() 上调用。

【解决方案2】：

我知道你想用 javascript 来解决这个问题，但你有没有考虑过使用带有 content 的 css 伪元素？如果这只是在您开发时用于占位符文本，我认为它会做您想做的事情，而无需添加一堆 javascript 并摆弄调整大小事件。

.block-text>p:after { 
    content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, eius, ab, molestiae praesentium hic quia quaerat culpa quas consectetur dolor veritatis vel voluptas minus laborum minima quis dolorum necessitatibus tempora.';
}

【讨论】：