10

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

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

4

5 回答 5

9

这是另一种看法，你不必没有省略号！

<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（见下面的注释）和在DIV上添加display: inline-block属性。.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 中查看

  • doctypeIE 需要Adisplay: inline-block才能正常工作。

  • 如果.qrytxtDIV 的溢出发生在一个长词上，那么省略号和最后一个可见词之间会有很大的差距。您可以通过查看示例并以小幅度调整浏览器宽度来了解这一点。（这可能也存在于原始示例中，我当时可能没有注意到）

再说一次，一个不完美的纯 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-binding 规则引用的 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>
于 2008-08-29T03:43:14.737 回答
4

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

document.getElementByID("qrytxt").offsetWidth;

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

于 2008-09-04T10:47:09.320 回答
2

CSS有办法吗？

不

有 PHP 吗？

不

-

为此，您必须获取每个字符的字体指标，并将它们应用于字符串中的所有字母。虽然您可以通过在服务器上使用像 ImageMagick 这样的绘图/渲染库来做到这一点，但它不会真正起作用，因为不同操作系统上的不同浏览器呈现不同的字体。

即使它确实有效，您也不会想要这样做，因为渲染也需要很长时间。您的服务器将能够每秒推送 1 页（如果那样的话）而不是几千页。

如果您可以在没有尾随 ... 的情况下生活，那么您可以使用divtags 和 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-29T03:05:07.667 回答
2

@罗伯特

如果你把椭圆放在一个低的div中，z-index这样当它向左移动时（对于较短的行），它们会被背景图像或其他东西覆盖怎么办？

我知道这很hacky，但是值得一试，对吧？

编辑另一个想法：用javascript确定包含省略号的div的位置，如果它没有被推到右边，隐藏它？

于 2008-08-29T04:06:21.327 回答
2

PHP 应该被完全排除在外，因为即使有一个设计用于测量字体的函数，http: //www.php.net/imageftbbox ，PHP 也无法知道访问者是否有最小值字体大小设置大于您预期的字体大小。

于 2009-06-26T06:33:12.797 回答