通过web应用程序确定打印字符串的宽度

在我的（PHP）web应用程序中，我有一部分网站保留了最近搜索的历史记录。最近的查询会显示在旁边框中。如果查询文本太长，我会截断它并显示省略号。例如：“我很长的查询是...”通过web应用程序确定打印字符串的宽度

目前，我截断了一定数量的字符。由于字体不是monotype，所有I的查询比所有W的查询更窄。我希望它们在椭圆之前大致相同的宽度。有没有办法获得结果字符串的近似宽度，以便任何给定字符串的椭圆将以大约相同数量的像素开始？ CSS有办法吗？ PHP是否？这会更好地处理JavaScript？

来源

2008-08-29 Dinah

这里还有一个承担它，你不必没有省略号的生活！

<html> 
<head> 

<style> 
div.sidebox { 
    width: 25%; 
} 

div.sidebox div.qrytxt { 
    height: 1em; 
    line-height: 1em; 
    overflow: hidden; 
} 

div.sidebox div.qrytxt span.ellipsis { 
    float: right; 
} 
</style> 


</head> 

<body> 

<div class="sidebox"> 
    <div class="qrytxt"> 
     <span class="ellipsis">&hellip;</span> 
     Some long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end. 
    </div> 
    <div class="qrytxt"> 
     <span class="ellipsis">&hellip;</span> 
     Some more long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end. 
    </div> 
    <div class="qrytxt"> 
     <span class="ellipsis">&hellip;</span> 
     Short text. Fail! 
    </div> 
</body> 

</html>

这里有一个缺陷，如果文本足够短，可以完全显示，椭圆仍然会显示。

[编辑：2009年6月26日]

当时我已经修改了这一点电编码器的建议。实际上只有两个更改，即doctype（请参见下面的注释）的添加以及.qrytxt DIV上的display: inline-block属性的添加。下面是它看起来像现在......

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <style> 
     div.sidebox 
     { 
      width: 25%; 
     } 

     div.sidebox div.qrytxt 
     { 
      height: 1em; 
      line-height: 1em; 
      overflow: hidden; 
      display: inline-block; 
     } 

     div.sidebox div.qrytxt span.ellipsis 
     { 
      float: right; 
     } 
</style> 
</head> 

<body> 
    <div class="sidebox"> 
     <div class="qrytxt"> 
      <span class="ellipsis">&hellip;</span> 
      Some long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end. 
     </div> 

     <div class="qrytxt"> 
      <span class="ellipsis">&hellip;</span> 
      Some more long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end. 
     </div> 

     <div class="qrytxt"> 
      <span class="ellipsis">&hellip;</span> 
      Short text. FTW 
     </div> 
    </div> 
</body> 
</html>

注：

在IE 8.0，Opera 9中，FF 3看
需要IE浏览器doctype得到display: inline-block才能正常工作。
如果.qrytxt DIV的溢出发生在一个长单词上，省略号和最后一个可见单词之间会有很大差距。您可以通过查看示例并以较小的增量调整浏览器宽度来查看。（这可能在最初的例子也同样存在，我只是可能没有注意到它，然后）

如此反复，一个不完美的只有CSS的解决方案。 Javascript可能是唯一可以获得完美效果的东西。

[编辑：2009年6月27日]

这里是使用浏览器的特定扩展另一种选择。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

<html> 
<head> 
    <style> 
     div.sidebox 
     { 
      width: 26%; 
     } 

     div.sidebox div.qrytxt 
     { 
      height: 1em; 
      line-height: 1em; 
      overflow: hidden; 
      text-overflow:ellipsis; 
      -o-text-overflow:ellipsis; 
      -ms-text-overflow:ellipsis; 
      -moz-binding:url(ellipsis-xbl.xml#ellipsis); 
      white-space:nowrap; 
     } 
    </style> 
</head> 

<body> 
    <div class="sidebox"> 
     <div class="qrytxt"> 
      Some long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end. 
     </div> 

     <div class="qrytxt"> 
      Some more long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end. 
     </div> 

     <div class="qrytxt"> 
      Short text. FTW 
     </div> 
    </div> 
</body> 
</html>

注意，为了让上面的例子中工作，你必须创建由-moz-绑定规则，省略号，xbl.xml引用的XML文件。它应该包含以下XML：

<?xml version="1.0" encoding="UTF-8"?> 
    <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> 
    <binding id="ellipsis"> 
     <content> 
     <xul:window> 
      <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description> 
     </xul:window> 
     </content> 
    </binding> 
    </bindings>

来源

2008-08-29 03:43:14

我喜欢这个答案，我们应该考虑用短文本问题的解决方法来更新它。我会看看我能做什么。 – 2009-06-25 17:50:57

CSS有办法吗？

没有

不PHP？

没有

要做到这一点你必须得到每个字符的字体度量，并将它们应用到你的字符串中的所有你的信。虽然您可以通过使用服务器上的ImageMagick等绘图/渲染库来实现此目的，但它不会真正起作用，因为不同操作系统的不同浏览器渲染字体的方式不同。

即使它确实有效，你也不想这样做，因为它也需要永远渲染。你的服务器将能够每秒推送1页（如果是）而不是数千。

如果你生活中可以没有结尾......，那么你可以使用它div标签和CSS overflow: hidden，这样很好假：

.line_of_text { 
    height:1.3em; 
    line-height:1.3em; 
    overflow:hidden; 
} 

<div class="line_of_text"> Some long text which will arbitrarily be cut off at whatever word fits best</div>

来源

2008-08-29 03:05:07

@Robert

什么，如果你把省略号在一个div与低z-index，这样，当它移动到左边（较短的线路），他们得到掩盖由背景图像或东西？

这很哈希我知道，但嘿值得一试的权利？

编辑另一个想法：用javascript确定包含椭圆的div的位置，如果不是一路推进，隐藏它？

来源

2008-08-29 04:06:21 Jiaaro

你也可以很容易地使用一些JavaScript：

document.getElementByID("qrytxt").offsetWidth;

会给你以像素为元素的宽度，甚至在IE6工作。如果在每个查询的末尾附加一个包含椭圆的span，可以使用一段简单的JavaScript语言逻辑测试以及一些CSS操作来根据需要隐藏/显示它们。

来源

2008-09-04 10:47:09

PHP应该完全没有考虑到，因为即使有一个专为测量字体而设计的功能，PHP也无法知道访问者是否具有较大的最小字体大小设置比预期的字体大小。

来源

2009-06-26 06:33:12 joebert

通过web应用程序确定打印字符串的宽度

回答

相关问题