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

StackOverflow https://stackoverflow.com/questions/33893

  •  09-06-2019
  •  | 
  •  

题

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

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

有帮助吗？

解决方案

这是另一种看法，您不必生活在没有省略号的情况下！

<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 属性上的 .qrytxt DIV。这是现在的样子......

<!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 中查看

  • A doctype IE 需要获取 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-binding 规则引用的 xml 文件， 省略号-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>

其他提示

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

document.getElementByID("qrytxt").offsetWidth;

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

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>

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

@罗伯特

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

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

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top