使动态文本适合定义的盒子大小的麻烦

Question

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

• http://plugins.jquery.com/project/TextFill
• 在dhtmlgoodies dot 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)，使用Jquery 1，2，3的Stack Overflow解决方案

Answer 2

我做了一个插件来解决这个问题：

https://github.com/jeremiahrose/perfectFit.js

它将在包装后单独调整每一行的大小，这似乎是您正在寻找的。