Question

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

http://plugins.jquery.com/project/TextFill
text_fit_in_box在dhtmlgoodies dot com上找到

两者都得到了相同的结果，即文本进入方框（一个好的开始），但文本没有包装，也没有根据样式表中指示的可用大小进行缩放。

文本是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

包裹后，它将分别调整每行的大小，这似乎是您想要的。

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

2 个答案: