проблемы с получением динамического текста для соответствия размеру блока

Question

Я пытаюсь разместить динамический текст в определенном поле на моем сайте Wordpress. Я исследовал, используя следующие два сценария:

• http://plugins.jquery.com/project/TextFill
• text_fit_in_box найден на dhtmlgoodies dot com

В обоих случаях я получаю одинаковые результаты: текст поступает в поля (хорошее начало), но текст не переносится и не масштабируется в соответствии с доступным размером, как указано в таблице стилей.

Текст представляет собой ссылку внутри div. Вот код для div в файле index.php в Wordpress:

<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

Я сделал плагин для решения этой проблемы:

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

Он будет изменять размер каждой строки отдельно после переноса, что, кажется, то, что вы ищете.

Answer 2

РЕДАКТИРОВАТЬ Похоже, кто-то уже сделал плагин jQuery для этой конкретной вещи: http://plugins.jquery.com/project/TextFill

Не конкретный ответ, а общая стратегия:

Возьмитеидентификатор поля и некоторый размер текста по умолчанию.Вызовите функцию, которая определяет, существует ли полоса прокрутки в элементе div.Если это так, немного уменьшите размер шрифта и повторите.Если нет, немного увеличьте размер шрифта и повторите.В любой момент вы обнаруживаете, что предыдущее действие должно было увеличиваться в размере, а текущее действие должно было уменьшаться в размере, вы находили точку, в которой текст помещается в поле.Это можно легко сделать с помощью простого цикла.

Если вы достигнете некоторого минимального размера текста, а полоса прокрутки все еще существует, вы можете постепенно потерпеть неудачу, установив в качестве значения размер текста по умолчанию, который вы первоначально отправили.

Вы можете уменьшить количество тестов с помощью бинарного поиска в любом направлении, каждый раз, когда вы делаете шаг, который меняет результат (имеет или не имеет полосу прокрутки), вы вдвое меньше, на который вы изменяете размер шрифта вследующий шаг.

Как узнать, имеет ли div полосу прокрутки: возможное решение (не проверено) , решения по переполнению стека с использованием Jquery 1 , 2 , 3