web-dev-qa-db-de.com

Lange Strings mit CSS abschneiden: schon machbar?

Gibt es eine gute Möglichkeit, Text mit einfachem HTML und CSS abzuschneiden, damit dynamischer Inhalt in ein Layout mit fester Breite und Höhe passt?

Ich habe die Server-Seite um logische Breite (dh eine blind erratene Anzahl von Zeichen) gekürzt, aber da ein 'w' breiter ist als ein 'i' dies ist in der Regel suboptimal und erfordert auch, dass ich die Anzahl der Zeichen für jede feste Breite überarbeite (und weiter optimiere). Im Idealfall erfolgt das Abschneiden im Browser, der die physische Breite des gerenderten Texts kennt.

Ich habe festgestellt, dass IE hat ein text-overflow: Ellipsis Eigenschaft, die genau das tut, was ich will, aber ich brauche dies, um browserübergreifend zu sein. Diese Eigenschaft scheint (etwas?) Standard zu sein wird aber von Firefox nicht unterstützt. Ich habe gefunden verschiedeneWorkarounds basierend auf overflow: hidden, aber sie zeigen entweder keine Auslassungspunkte an (ich möchte, dass der Benutzer weiß, dass der Inhalt abgeschnitten wurde) oder sie zeigen ihn die ganze Zeit an (selbst wenn der Inhalt nicht abgeschnitten wurde).

Hat jemand eine gute Möglichkeit, dynamischen Text in ein festes Layout einzufügen, oder ist die serverseitige Kürzung um die logische Breite so gut, wie ich es vorerst bekommen werde?

209
Sam Stokes

Update: text-overflow: Ellipsis wird jetzt unterstützt ab Firefox 7 (veröffentlicht am 27. September 2011). Yay! Meine ursprüngliche Antwort folgt als historische Aufzeichnung.

Justin Maxwell hat eine browserübergreifende CSS-Lösung. Es hat jedoch den Nachteil, dass der Text in Firefox nicht ausgewählt werden kann. Check out sein Gastbeitrag auf Matt Sniders Blog für die vollständigen Details, wie dies funktioniert.

Beachten Sie, dass diese Technik auch verhindert, dass der Inhalt des Knotens in JavaScript mit der Eigenschaft innerHTML in Firefox aktualisiert wird. Eine Problemumgehung finden Sie am Ende dieses Beitrags.

[~ # ~] CSS [~ # ~]

.Ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: Ellipsis;
    -o-text-overflow: Ellipsis;
    -moz-binding: url('assets/xml/Ellipsis.xml#Ellipsis');
}

Ellipsis.xml Dateiinhalt

<?xml version="1.0"?>
<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>

Aktualisieren des Knoteninhalts

Verwenden Sie Folgendes, um den Inhalt eines Knotens auf eine Weise zu aktualisieren, die in Firefox funktioniert:

var replaceEllipsis(node, content) {
    node.innerHTML = content;
    // use your favorite framework to detect the gecko browser
    if (YAHOO.env.ua.gecko) {
        var pnode = node.parentNode,
            newNode = node.cloneNode(true);

        pnode.replaceChild(newNode, node);
    }
};

Siehe Matt Sniders Beitrag für eine Erklärung, wie das funktioniert .

187
Simon Lieschke

2014 März: Lange Zeichenfolgen mit CSS abschneiden: eine neue Antwort mit Schwerpunkt auf Browserunterstützung

Demo auf http://jsbin.com/leyukama/1/ (Ich benutze Jsbin, weil es alte Version des IE unterstützt).

<style type="text/css">
    span {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: Ellipsis;     /** IE6+, Firefox 7+, Opera 11+, Chrome, Safari **/
        -o-text-overflow: Ellipsis;  /** Opera 9 & 10 **/
        width: 370px; /* note that this width will have to be smaller to see the effect */
    }
</style>

<span>Some very long text that should be cut off at some point coz it's a bit too long and the text overflow Ellipsis feature is used</span>

Die CSS-Eigenschaft -ms-text-overflow ist nicht erforderlich: Sie ist ein Synonym für die CSS-Eigenschaft text-overflow. Versionen von IE= von 6 bis 11 unterstützen jedoch bereits die CSS-Eigenschaft text-overflow .

Erfolgreich getestet (auf Browserstack.com) unter Windows, für Webbrowser:

  • IE6 bis IE11
  • Opera 10.6, Opera 11.1, Opera 15.0, Opera 20.0
  • Chrome 14, Chrome 20, Chrome 25
  • Safari 4.0, Safari 5.0, Safari 5.1
  • Firefox 7.0, Firefox 15

Firefox: Wie von Simon Lieschke (in einer anderen Antwort) hervorgehoben, unterstützt Firefox nur die CSS-Eigenschaft für Textüberlauf ab Firefox 7 (veröffentlicht am 27. September 2011).

Ich habe dieses Verhalten in Firefox 3.0 und Firefox 6.0 überprüft (Textüberlauf wird nicht unterstützt).

Einige weitere Tests auf einem Mac OS-Webbrowser wären erforderlich.

Hinweis: Möglicherweise möchten Sie einen Tooltip beim Bewegen der Maus anzeigen, wenn eine Ellipse angewendet wird. Dies kann über JavaScript erfolgen. Siehe hierzu die folgenden Fragen: Erkennung von HTML-Textüberlauf-Ellipsen und HTML - wie kann ich den Tooltip NUR anzeigen, wenn Ellipse aktiviert ist

Ressourcen:

44
Adrien Be

Wenn Sie mit einer JavaScript-Lösung einverstanden sind, gibt es ein jQuery-Plug-In, das dies browserübergreifend ausführt - siehe http://azgtech.wordpress.com/2009/07/26/text-overflow -Ellipsis-für-Firefox-via-jquery /

19
RichieHindle

OK, Firefox 7 implementiert text-overflow: Ellipsis ebenso gut wie text-overflow: "string". Die endgültige Veröffentlichung ist für den 27.09.2011 geplant.

7
j.j.

Eine andere Lösung für das Problem könnten die folgenden CSS-Regeln sein:

.Ellipsis{
 white-space:nowrap;
 overflow:hidden;
}

.Ellipsis:after{
  content:'...';
}

Der einzige Nachteil des obigen CSS ist, dass es das "..." hinzufügt, unabhängig davon, ob der Text den Container überläuft oder nicht. Wenn Sie jedoch einen Fall haben, in dem Sie eine Reihe von Elementen haben und sicher sind, dass der Inhalt überläuft, ist dies ein einfacherer Satz von Regeln.

Meine zwei Cent. Hut ab vor der ursprünglichen Technik von Justin Maxwell

6
Rajat

Als Referenz finden Sie hier einen Link zum "Bug" Tracking Textüberlauf: Ellipsis-Unterstützung in Firefox . Klingt so, als ob Firefox der einzige größere Browser ist, der keine native CSS-Lösung unterstützt.

1
Sam Stokes