Din*_*nah 7 javascript css php
在我的(PHP)Web应用程序中,我的网站的一部分保留了最近搜索的历史记录.最近的查询显示在旁边框中.如果查询文本太长,我会截断它并显示省略号.例如:"我很长的疑问是......"
目前,我在一定数量的字符后截断.由于字体不是单字型,因此对所有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(见下面的注释)和display: inline-block在.qrytxtDIV 上添加属性.这就是现在的样子......
<!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中查看
doctypeIE需要A 才能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>