Question

在居中的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插件，或者你能推荐一个策略吗？

Answer 1

我只使用严格的JavaScript来解决它，就这样：
1.将一个名为'truncate'的类放到要打破的h1标签上 2.根据您的需要配置javascript代码

MAXCOUNT：每行计算的（整数）最大字符数

COUNT_SPACES :(布尔值）必须计算空格？

COUNT_PUNCTUATION :(布尔值）标点符号必须计算？

EXACT :(布尔值）必须删除最后一个单词？

BLOCKS_CLASS :(字符串）要考虑的h1的className

我写的代码非常快，所以必须更好地测试bug，但我认为这可能是一个起点
我没有在这段代码中使用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/

Answer 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的主页上查看此代码。

Answer 3

这个派对迟到了，但这是我的方法。我得到初始元素高度（任何具有类balance_lines的元素，在下面的代码中），然后逐渐收缩元素的宽度。一旦元素的高度发生变化，我就走得太远了。之前的步骤应该具有可爱的大致相等的线长度

Answer 4

CSS Text 4 draft提议text-wrap: balance，但我认为任何浏览器都没有实现它。

与此同时，您可以使用Adobe的jQuery插件（demo）：https://github.com/adobe-webplatform/balance-text

使文本行具有相同的长度

4 个答案: