Question

在我的（PHP）网络应用程序中，我的网站中有一部分保存了最近搜索的历史记录。最近的查询显示在旁边框中。如果查询文本太长，我会截断它并显示省略号。例如：“我非常长的询问是......”

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

Answer 1

这是另一种观点，你不必没有省略号！

<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日]

根据Power-Coder的建议，我对此进行了一些修改。实际上只有两项更改，doctype的添加（请参阅下面的注释）以及在display: inline-block DIV上添加.qrytxt属性。这就是现在的样子......

<!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绑定规则引用的xml文件 ellipsis-xbl.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>

Answer 2

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

document.getElementByID("qrytxt").offsetWidth;

将以像素为单位给出元素的宽度，甚至可以在IE6中使用。如果在每个查询的末尾附加包含省略号的span，则可以使用JavaScript中的简单逻辑测试和一些CSS操作来隐藏/显示它们。

Answer 3

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>

Answer 4

@Robert

如果你将椭圆放在一个低z-index的div中，那么当它向左移动时（对于较短的线条），它们会被背景图像或其他东西掩盖？

我知道这很糟糕，但是值得一试吗？

编辑另一个想法：使用javascript确定包含省略号的div的位置，如果它没有被完全推动，请隐藏它吗？

Answer 5

完全不考虑PHP，因为即使有一个专门用于测量字体的函数http://www.php.net/imageftbbox，PHP也无法知道访问者是否具有最小字体大小设置这比你预期的字体大小要大。

通过webapp确定打印字符串的宽度

5 个答案: