javascript - 获取动态文本以适应定义的框大小的麻烦

Question

我正在尝试将一些动态文本放入我的 Wordpress 网站上定义的框中。我使用以下两个脚本进行了调查:

• > http://plugins.jquery.com/project/TextFill
• 在 dhtmlgoodies.com 上找到的 text_fit_in_box

我得到了相同的结果，即文本进入框(一个好的开始)但文本没有换行，也没有根据样式表中指示的可用大小进行缩放。

文本是 div 内的链接。这是 Wordpress 的 index.php 文件中 div 的代码:

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <div id="id<?php echo get_post_meta($post->ID, "blipclass", true); ?>" class="<?php echo get_post_meta($post->ID, "blipclass", true); echo " "?>blip storycontent frontp news-post">
        <a href="<?php echo the_permalink(); ?>" class="bliptext"><?php echo get_post_meta($post->ID, "blip", true); ?></a>
        <script type="text/javascript">fitTextInBox('id<?php echo get_post_meta($post->ID, "blipclass", true); ?>',136);</script>
    </div>
</div>

和我的样式表的相关部分

#idblip-c, #idblip-m, #idblip-y, #idblip-k, {
        width: 218px !important;
        height: 136px !important;
        overflow: auto !important;
}

.bliptext {
        padding:10px;
        padding-top:15px;
        width:100%;
        height:100%;
        overflow: auto !important;
}

基本上，我希望看到正面尺寸根据盒子中的可用空间而变化。单词越少，字体越大，反之亦然。

这是我现在所在的位置:

如您所见，字体大小已最大化且未换行。我使用任一脚本都做到了这一点。

非常感谢有关此事的任何提示。

一些CSS

#idblip-c, #idblip-m, #idblip-y, #idblip-k, {
        width: 218px !important;
        height: 136px !important;
        overflow: auto !important;

HTML 输出

        <div class="frontpics">
                                                <div id="post-1831" class="post-1831 post type-post status-publish format-standard hentry category-news">
                            <div id="idblip-c" class="blip-c blip storycontent frontp news-post">
                                <a href="story1/" class="bliptext">HE NEVER STOPS, EVER!</a>
                                <script type="text/javascript">fitTextInBox('idblip-c',136);</script>
                            </div>
                        </div>
                                                <div id="post-1649" class="post-1649 post type-post status-publish format-standard hentry category-news">

                            <div id="idblip-m" class="blip-m blip storycontent frontp news-post">
                                <a href="story2/" class="bliptext">FIRST PLACE</a>
                                <script type="text/javascript">fitTextInBox('idblip-m',136);</script>
                            </div>
                        </div>
                                                <div id="post-1826" class="post-1826 post type-post status-publish format-standard hentry category-news tag-caen tag-france tag-klar tag-masterplan">
                            <div id="idblip-y" class="blip-y blip storycontent frontp news-post">
                                <a href="story3/" class="bliptext">MASTER OF THE UNIVERSE</a>

                                <script type="text/javascript">fitTextInBox('idblip-y',136);</script>
                            </div>
                        </div>
                                                <div id="post-1820" class="post-1820 post type-post status-publish format-standard hentry category-news">
                            <div id="idblip-k" class="blip-k blip storycontent frontp news-post">
                                <a href="story4/" class="bliptext">CONTEMPORARY SHT</a>
                                <script type="text/javascript">fitTextInBox('idblip-k',136);</script>

                            </div>
                        </div>
                                        </div>
            </div>

Answer 1

编辑 看起来有人已经为这件事制作了一个 jQuery 插件:http://plugins.jquery.com/project/TextFill

不是具体的答案，而是一般的策略:

获取框的 ID 和一些默认文本大小。 调用一个函数来检测 div 上是否存在滚动条。 如果是这样，请稍微减小字体大小，然后重复。 如果不是，请稍微增加字体大小，然后重复。 在任何时候您检测到先前的操作是增加大小，而当前的操作是减小大小，您已经找到了文本适合框的点。这可以通过一个简单的循环轻松完成。

如果达到某个最小文本大小并且滚动条仍然存在，您可以通过将该值设置为您最初发送的默认文本大小来优雅地失败。

您可以通过向任一方向进行二进制搜索来减少测试次数，每次执行更改结果的步骤(有或没有滚动条)时，您将更改字体大小的距离减半下一步。

如何确定一个 div 是否有滚动条:possible solution (haven't tested) , Stack Overflow 上使用 Jquery 的解决方案 1 , 2 , 3