Question

我已经遇到过这个问题几次了。我没有问题将字符串中的字符限制为特定数字。但是，有些角色比其他角色更长，所以它包裹到另一条线或使我的DIV元素更宽，而且与我网站的其余部分不一致。

例如：

Literacy - Is it the Sa
Machu Picchu, Cuzco, Pe

是完全相同的字符数量（23），包括空格，但是Machu Pichu在屏幕上的实际宽度方面更长。

对于基于实际字符串宽度而不是字符数的字符串，是否有任何方法可以使用统一的大小？有人必须在此之前提出解决方案吗？

Answer 1

第一个（明显的）解决方案：切换到固定宽度的字体，如Courier，Lucida Console，Consolas等。
第二个解决方案：使用GD library至write strings to a graphic object并测量该对象。

Answer 2

您可能需要使用GD和imagefontwidth（）：http://ar2.php.net/manual/es/function.imagefontwidth.php

Answer 3

如果没有在PHP中编写算法来限制基于您使用的特定字体的“font-widths”的字符，则可以使用等宽字体。

或者，我确信可以编写一个JavaScript解决方案来测试宽度，但我不确定我的头脑是多么偏离。

Answer 4

这不能用PHP完成 - 你能做的最好就是近似。不同的浏览器和不同的操作系统对于相同的字体呈现不同的字体宽度。因此，即使您在浏览器和操作系统上手动存储了字体的字符字体宽度数组，也可能与其他人不匹配。

通常情况下，设计围绕不同宽度字体的可能性比尝试强制它更好。

话虽如此，这可以在javascript中完美地完成（没有近似），尽管有一点点黑客攻击。有许多可能的方法，但这里有一个：首先在一个div中渲染完整的字符串，然后测量div的高度。如果它大于一行可能，则开始循环逐步删除最后一个单词。继续前进，直到div的高度为一行。

Answer 5

使用CSS进行格式化，使它们都具有均匀的宽度 - 右侧没有锯齿状边缘。像这样：

p { text-align: justify; }

Answer 6

在这个CSS + JS解决方案上有一些有趣的工作。它没有经过密集测试（Firefox + IE7 / 8），但它应该可以正常工作......

<script type="text/javascript" src="jquery.js"></script>
<style>
    .monospaced, .not-monospaced{
        font: normal normal 16px/16px Verdana; /* not monospaced font */
        clear: both;
    }
    .monospaced span{
        float: left;
        display: block;
        width: 16px;
        text-align: center;
    }
</style>
<script>
    $(document).ready(function(){
        $('.monospaced').each(function(){
            var monospace = $(this).html(); // .trim() does not work at IE http://api.jquery.com/jQuery.trim/ (view comments)
            monospace.replace(/(^[\s\xA0]+|[\s\xA0]+$)/g, '');
            mono = monospace.split('');

            for(i = 0; i < mono.length; i++){
                if(mono[i] == ' ')
                    mono[i] = '&nbsp;';

                mono[i] = '<span>'+mono[i]+'</span>';
            }

            $(this).html(mono.join(''));
        });
    });
</script>
</head>
<body>
    <div class="not-monospaced">
        This is supposed to be monospaced...
    </div>
    <div class="not-monospaced">
        mmmm mm mmmmmmmm mm mm mmmmmmmmmm...
    </div>

    <div class="monospaced">
        This is supposed to be monospaced...
    </div>
    <div class="monospaced">
        mmmm mm mmmmmmmm mm mm mmmmmmmmmm...
    </div>
</body>

将字符限制为特定宽度

6 个答案: