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

发布时间：2020-12-13 18:18:29 所属栏目：PHP教程来源：网络整理

导读：在我的( PHP)webapp中,我的网站的一部分保存了最近搜索的历史记录.最近的查询显示在旁边框中.如果查询文本太长,我会截断它并显示省略号.例如：“我很长的疑问是……” 目前,我在一定数量的字符后截断.由于字体不是单字型,因此对所有I的查询比对所有W的查询更

在我的( PHP)webapp中,我的网站的一部分保存了最近搜索的历史记录.最近的查询显示在旁边框中.如果查询文本太长,我会截断它并显示省略号.例如：“我很长的疑问是……”

目前,我在一定数量的字符后截断.由于字体不是单字型,因此对所有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(请参阅下面的注释),并在.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来显示：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文件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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!