Сделать строки текста одинаковой длины

В центрированных элементах h1, если текст попадает на несколько строк, разрывы строк делают текст таким:

                This is a header that takes up two
                              lines

                This is a header that takes up three
                lines because it is really, really
                              long

Есть ли способ манипулировать этими элементами так, чтобы длина строк текста была примерно одинаковой? Вот так:

                       This is a header that
                        takes up two lines

                    This is a header that takes 
                     up three lines because it
                       is really, really long

Плагин jQuery Widow Fix предотвращает одиночные слова, но я ищу что-то, что выравнивает все строки в многострочном элементе. Есть ли какие-либо плагины jQuery для этого или вы можете рекомендовать стратегию?

ОТВЕТЫ

Ответ 1

Я бы решил это, используя только строгий JavaScript, идя следующим образом:

1. Поместите класс с именем "truncate" в теги h1, которые вы хотите разбить. 2. настройте код JavaScript на свои потребности, зная, что

MAXCOUNT: (целое число) максимальное количество символов, подсчитываемых за строку COUNT_SPACES: (boolean) пробелы должны быть подсчитаны? COUNT_PUNCTUATION: (boolean) пунктуация должна учитываться? EXACT: (boolean) последнее слово должно быть сокращено? BLOCKS_CLASS: (string) имя класса h1 для рассмотрения

Я написал код очень быстро, поэтому он должен быть лучше проверен на наличие ошибок, но это может быть отправной точкой, я думаю.
Я не использую jQuery в этом коде, чтобы сохранить свет кода и избегать зависимостей.
Я думаю, что я использую все кросс-браузерные команды (не могу проверить, у меня есть только linux сейчас). Однако любая коррекция для задачи совместимости между браузерами (включая использование jquery, если требуется) может быть легкой.

Вот код:

<html>

<head>
    <style>
        h1 {background-color: yellow;}
        #hiddenDiv {background-color: yellow; display: table-cell; visibility:hidden;}
    </style>
    <script>

        var MAXCOUNT            = 20;
        var COUNT_SPACES        = false;
        var EXACT               = false;
        var COUNT_PUNCTUATION   = true;
        var BLOCKS_CLASS        = 'truncate';

        window.onload = function () 
        {
            var hidden = document.getElementById('hiddenDiv');

            if (hidden == null)
            {
                hidden = document.createElement('div');
                hidden.id = 'hiddenDiv';
                document.body.appendChild(hidden);
            }

            var blocks = document.getElementsByClassName(BLOCKS_CLASS);     

            for (var i=0; i<blocks.length; i++)
            {
                var block           = blocks[i];
                var text            = block.innerHTML;
                var truncate        = '';
                var html_tag        = false;
                var special_char    = false;
                maxcount            = MAXCOUNT;
                for (var x=0; x<maxcount; x++)
                {
                    var previous_char = (x>0) ? text.charAt(x-1) : '';
                    var current_char = text.charAt(x);

                    // Closing HTML tags
                    if (current_char == '>' && html_tag)
                    {
                        html_tag = false;
                        maxcount++;
                        continue;
                    }
                    // Closing special chars
                    if (current_char == ';' && special_char)
                    {
                        special_char = false;
                        maxcount++;
                        continue;
                    }
                    // Jumping HTML tags
                    if (html_tag)
                    {
                        maxcount++;
                        continue;
                    }
                    // Jumping special chars
                    if (special_char)
                    {
                        maxcount++;
                        continue;
                    }
                    // Checking for HTML tags
                    if (current_char == '<')
                    {
                        var next = text.substring(x,text.indexOf('>')+1);
                        var regex = /(^<\w+[^>]*>$)/gi;
                        var matches = regex.exec(next); 
                        if (matches[0])
                        {
                            html_tag = true;
                            maxcount++;
                            continue;
                        }                       
                    }
                    // Checking for special chars
                    if (current_char == '&')
                    {
                        var next = text.substring(x,text.indexOf(';')+1);
                        var regex = /(^&#{0,1}[0-9a-z]+;$)/gi;
                        var matches = regex.exec(next);
                        if (matches[0])
                        {
                            special_char = true;
                            maxcount++;
                            continue;
                        }
                    }                   
                    // Shrink multiple white spaces into a single white space
                    if (current_char == ' ' && previous_char == ' ')
                    {
                        maxcount++;
                        continue;
                    }
                    // Jump new lines
                    if (current_char.match(/\n/))
                    {
                        maxcount++;
                        continue;
                    }                   
                    if (current_char == ' ')
                    {
                        // End of the last word
                        if (x == maxcount-1 && !EXACT) { break; }
                        // Must I count white spaces?
                        if ( !COUNT_SPACES ) { maxcount++; }
                    }
                    // Must I count punctuation?
                    if (current_char.match(/\W/) && current_char != ' ' && !COUNT_PUNCTUATION)
                    {
                        maxcount++;
                    }
                    // Adding this char
                    truncate += current_char;
                    // Must I cut exactly?
                    if (!EXACT && x == maxcount-1) { maxcount++; }
                }

                hidden.innerHTML = '<h1><nobr>'+truncate+'</nobr></h1>';

                block.style.width = hidden.offsetWidth+"px";
            }
        }

    </script>
</head>


<body>

<center>
    <h1 class="truncate">
        This is a header that
        takes up two lines
    </h1>

    <br>

    <h1 class="truncate">
        This is a header that takes 
        up three lines because it
        is really, really long
    </h1>

    <br>

    <h1>
        This is a header pretty short
        or pretty long ... still undecided
        which in any case is not truncated!
    </h1>
</center>

</body>

</html>

И вот демо: http://jsfiddle.net/6rtdF/

Ответ 2

Поздно к этой вечеринке, но вот мой подход. Я получаю начальную высоту элемента (любые элементы с классом balance_lines, в коде ниже), а затем постепенно уменьшаем ширину элемента. Когда высота элемента меняется, я зашел слишком далеко. Шаг до этого должен иметь прекрасную грубо равную длину линии.

$('.balance_lines').each(function(){
    var currentHeight = $(this).height();
    var thisHeight = currentHeight;
    var currentWidth = $(this).width();
    var newWidth = currentWidth;
    // Try shrinking width until height changes
    while (thisHeight == currentHeight) {
        var testWidth = newWidth - 10;
        $(this).width(testWidth);
        thisHeight = $(this).height();
        if (thisHeight == currentHeight) {
            newWidth = testWidth;
        } else {
            break;
        }
    }
    $(this).width(newWidth);
});

Этот код можно увидеть на главной странице apollopad.com.

Ответ 3

Поздно к этой вечеринке, но вот мой подход. Я получаю начальную высоту элемента (любые элементы с классом balance_lines, в коде ниже), а затем постепенно уменьшаем ширину элемента. Когда высота элемента меняется, я зашел слишком далеко. Шаг до этого должен иметь прекрасные грубо равные длины строк