Hier ist eine andere auf sie nehmen, und Sie müssen nicht zu Lebe ohne die Ellipse!
Es gibt einen Fehler mit diesem, wenn der Text kurz genug ist, um vollständig angezeigt zu werden, werden die Ellipsen immer noch angezeigt.
[EDIT: 2009.06.26]
Auf Anregung von Power Coder ich diese ein wenig überarbeitet. Es gibt wirklich nur zwei Änderungen, die Addition der doctype (siehe Hinweise unten) und die Hinzufügung des display: inline-block Attributs auf dem .qrytxt DIV. Hier ist, wie es jetzt aussieht ...
<!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>
Hinweise:
gesehen in IE 8.0, Opera 9, FF 3
A doctype für IE erforderlich ist, erhalten die display: inline-block funktioniert ordnungsgemäß.
Wenn die .qrytxt DIV des Überlauf tritt auf einem langen Wort, es geht um eine große Lücke zwischen den drei Punkten und dem letzten sichtbaren Wort sein. Sie können dies sehen, indem Sie das Beispiel betrachten und die Größe Ihres Browsers in kleinen Schritten ändern. (das gab es wahrscheinlich auch im Original-Beispiel, ich habe es vielleicht gerade nicht bemerkt)
Also wieder eine unvollkommene CSS-Lösung. Javascript kann die einzige Sache sein, die den Effekt perfekt erhalten kann.
[EDIT: 2009.06.27]
Hier ist eine weitere Alternative, die Browser-spezifische Erweiterungen verwendet.
<!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>
Beachten Sie, dass für das obige Beispiel, um zu arbeiten, können Sie die XML-Datei durch die -moz-binding Regel verwiesen erstellen müssen, Ellipsen-xbl.xml. Es ist sollte folgende xml enthalten:
<?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>
Ich mag diese Antwort, wir sollten es mit einer Problemumgehung für das Kurztext-Problem aktualisieren. Ich sehe was ich tun kann. –
Ich habe eine Alternative hinzugefügt. Aber immer noch nicht perfekt :( –
Hier sind zwei zusätzliche Gedanken. Erstens, verwenden Sie & hellip; für Auslassungspunkte, "..." ist nicht das gleiche wie "...". Zweitens, warum alle schwebenden Spannen beginnen mit? Sie können die lassen browser fügen Sie dem div bei Bedarf automatisch die Ellipse zum div hinzu (durch Angabe von text-overflow: Ellipse für IE, -o-text-overflow: Ellipse für Opera und Verwendung der -moz-Binding-Problemumgehung für FF). –