将字符限制为特定宽度

我遇到过几次这个问题。我没有问题将字符串中的字符限制为特定的数字。但是，有些字符比其他字符长，所以它会换行，或者使我的DIV元素变宽，而与我网站的其他部分不一致。将字符限制为特定宽度

例如：

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

是准确相同的字符量（23）包括空格，但马丘比丘一个较长在屏幕上的实际宽度方面。

有没有什么办法可以根据实际字符串的宽度而不是字符数来获得一个统一大小的字符串？有人必须在此之前提出解决方案吗？

来源

2010-11-23 mmundiff

你可以使用等宽字体：http://en.wikipedia.org/wiki/Monospaced_font – acm 2010-11-23 17:25:15

没有你看到我的js + css解决方案？ – acm 2010-11-23 18:46:34

@andre matos我现在正在看看它。感谢您的帮助 – mmundiff 2010-11-23 19:08:39

优先（明显）溶液：切换到固定宽度的字体，如信使，龙力控制台，索拉等
第二溶液：使用GD library write strings to a graphic object到并测量该对象。

来源

2010-11-23 17:31:50 JYelton

如果不使用PHP中的算法来根据您所使用的特定字体的“字体宽度”限制字符，则可以使用等宽字体。

或者，我确定也可以编写一个JavaScript解决方案来测试宽度，但我不确定我的头顶有多离谱。

来源

2010-11-23 17:25:57 simshaun

你可能有GD和imagefontwidth（）播放：http://ar2.php.net/manual/es/function.imagefontwidth.php

来源

2010-11-23 17:30:27

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

围绕不同宽度的字体的可能性而不是试图强制它的设计通常会更好。

这就是说，这可以完美地（无近似地）在JavaScript中完成，尽管有一点点黑客。有许多可能的方法，但是这里有一个：首先在一个div中显示完整的字符串，该div具有要查找的宽度，然后测量div的高度。如果它大于一行可能，则循环开始循环删除最后一个单词。继续前进，直到div的高度为一行。

来源

2010-11-23 17:30:56

使用CSS进行格式设置，使它们都具有统一的宽度 - 右侧没有锯齿状边缘。类似这样的：

p { text-align: justify; }

来源

2010-11-23 17:45:01 stillstanding

在这个CSS + JS解决方案中有一些有趣的工作。这不是密集测试（火狐+ 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>

来源

2010-11-23 18:04:43 acm

将字符限制为特定宽度

回答

相关问题