jquery - 为什么 BigText 插件只适用于静态 html？

Question

我正在使用BigText插件，我有一个小问题。我希望清楚：

在调整窗口大小之前，设置在空中的 div 的文本不适合...

这个小提琴不言自明。

JS

$(document).ready(function () {
    // doesn't works
    $(".span4").bigtext({
        childSelector: '> #fae'
    });

    $("#fae").text("abc");

    //works
    $(".span4:first").bigtext({
        childSelector: '> #wer'
    });
});

HTML

<div class="container">
    <div class="row">
        <div class="span4">
             <div id="wer">abc</div>
        </div>
        <div id="caca" class="span4">
             <div id="fae"></div>
        </div>
    </div>
</div>

CSS

#fae, #wer {
    margin: 10px;
    margin-top: 90px;
    padding-top: 40px;
    font-weight: 800;
    color: #282B36;
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;

}
.span4 {
    background: red;
    height: 500px;
}

任何提示或建议将不胜感激。如果您需要更多信息，请告诉我，我会编辑帖子。

Answer 1

因为它适用于当前文本，所以无论何时更改文本，都必须再次重新初始化插件：

$(document).ready(function () {
    $("#fae").text("abc");

    $(".span4").bigtext({
        childSelector: '> #fae'
    });
});

Answer 2

也许你想要这个：

演示

$("#fae").text("abc");

$(".span4").bigtext({
    childSelector: '> #wer,> #fae'
});