Javascript 获取动态文本以适应定义的框大小时遇到问题

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

• dhtmlgoodies.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>

基本上，我希望看到前面的大小根据盒子中的可用空间而改变。字数越少字体越大，反之亦然

这就是我现在的处境：

正如您所看到的，字体大小正在最大化，并且没有包装。我用这两种脚本都能做到这一点

关于此事的任何提示都将不胜感激

更多的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>

安装箱（'idblip-c'，136）；
安装盒（'idblip-m'，136）；
安装盒（'idblip-y'，136）；
安装盒（'idblip-k'，136）；

编辑看起来有人已经为这个东西制作了jQuery插件：

不是一个具体的答案，而是一个总体策略：

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

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

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

---

如何找出div是否有滚动条：，使用Jquery解决堆栈溢出问题，

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

---

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

PHP和JavaScript可能不相关。你能粘贴一个输出的HTML样本吗？还有更多的CSS.TextFill是我开始使用的，并且很难使用，所以我尝试了dhtmlgoodies.com上的TextFitinBox javascript，看看是否可以进一步使用。然而，在这两个脚本中，我都走到了同一条死胡同。这在文章底部的imgur屏幕截图中有描述。为什么jQuery插件TextFill和TextFitinBox最终会在同一行上产生相同的结果，即最大化文本和混合。我很抱歉。我不知道你试过的图书馆是一样的。若并没有完整的代码，我不能确定，但我想的是：其中一些样式（如post类型post status publish格式标准hentry category news）会干扰正在讨论的样式。此外，由于您知道jQueryTextFill在他们的演示中起作用，您应该以他们为例，慢慢地修改它，直到您在站点上获得所需的输出。我知道文本是如何像那样被扭曲的唯一方法是不正确地使用字母间距和/或行高。好的，从现在开始，我将重点讨论jQuery textfill脚本。你能想出为什么文本不会下降到多行的原因吗？换句话说，可能的原因是文本拒绝在框内换行，并在必要时跨越多行？在我的例子中，所有的东西都被推到了最上面，然后挤在一起。我还要看看其他的款式，看看有没有什么。谢谢。有什么可以防止包装的吗？预标记、代码标记或任何带有

空格的内容：nowrap此外，糟糕的行高也会将字符混在一行中。请采纳您的建议，并将重点放在CSS上。为有问题的方框创建了一个单独的样式，发现它与另一个样式的线条高度不一致。谢谢你的帮助！
        <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>