在我的 (PHP) 网络应用程序中，我的网站有一部分保留最近搜索的历史记录。最近的查询显示在侧框中。如果查询文本太长，我会 chop 它并显示省略号。例如:“我很长的查询是……”
目前，我在一定数量的字符后 chop 。由于字体不是单型，所有 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">…</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">…</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">…</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">…</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">…</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">…</span>
Short text. FTW
</div>
</div>
</body>
</html>
注意事项:
在 IE 8.0、Opera 9、FF 3 中查看
IE 需要
doctype才能使display: 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>
关于php - 通过 webapp 确定打印字符串的宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33893/