Lange Zeichenfolgen mit CSS abschneiden: Noch machbar?

210

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 serverseitig nach logischer Breite abgeschnitten (dh eine blind erratene Anzahl von Zeichen), aber da ein 'w' breiter als ein 'i' ist, ist dies tendenziell suboptimal und erfordert auch ein erneutes Erraten ( und weiter optimieren) die Anzahl der Zeichen für jede feste Breite. Im Idealfall erfolgt das Abschneiden im Browser, der die physische Breite des gerenderten Texts kennt .

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

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

Sam Stokes
quelle
2014: siehe eine aktuelle Antwort stackoverflow.com/questions/802175/…
Adrien Be
Verwandte: Anwenden von Ellipsen auf mehrzeiligen Text
Michael Benjamin

Antworten:

187

Update: text-overflow: ellipsiswird jetzt unterstützt ab Firefox 7 (veröffentlicht am 27. September 2011) unterstützt. 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. In seinem Gastbeitrag auf Matt Sniders Blog finden Sie alle Details dazu.

Beachten Sie, dass diese Technik auch verhindert, dass der Inhalt des Knotens in JavaScript mithilfe der innerHTMLEigenschaft 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);
    }
};

In Matt Sniders Beitrag finden Sie eine Erklärung, wie dies funktioniert .

Simon Lieschke
quelle
Das ist großartig, danke, dass du darauf hingewiesen hast! Der nicht auswählbare Text und die Einschränkungen, welche Inhalte in das abgeschnittene Div aufgenommen werden können, sind eine Schande, aber im Allgemeinen sieht das nach einer guten Lösung aus.
Sam Stokes
Die einzige echte Enttäuschung, die ich getroffen habe, ist, dass Leerzeichen als & nbsp; gerendert werden, so dass Einrückungen nicht wirklich machbar sind ... = /
Matchu
Ich bin auch auf dasselbe Problem gestoßen. Ich kann nicht glauben, dass Firefox dies in irgendeiner Form noch nicht unterstützt.
Mcjabberz
Funktioniert dieser Ansatz für alle Benutzer von OPTION-Elementen von SELECT-Steuerelementen in Webkit und IE8? Webkit scheint nichts für mich zu tun und IE8 schneidet es einfach ohne Auslassungspunkte ab.
Rajat
In der Microsoft-Dokumentation für text-overflowwird keine Unterstützung für optionElemente angegeben (siehe Abschnitt Gilt für unter msdn.microsoft.com/en-us/library/ms531174(VS.85).aspx ).
Simon Lieschke
45

2014 März: Abschneiden langer Zeichenfolgen mit CSS: Eine neue Antwort mit Schwerpunkt auf Browserunterstützung

Demo auf http://jsbin.com/leyukama/1/ (Ich verwende jsbin, weil es die alte Version von 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, aber Versionen von IE von 6 bis 11 unterstützen 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 zweimal überprüft (Textüberlauf wird nicht unterstützt).

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

Hinweis: Wenn eine Ellipse angewendet wird, möchten Sie möglicherweise einen Tooltip beim Bewegen mit der Maus anzeigen. Dies kann über Javascript erfolgen. Weitere Informationen finden Sie unter: Erkennung von HTML-Textüberlauf-Ellipsen und HTML - Wie kann ich den Tooltip NUR anzeigen, wenn die Ellipse aktiviert ist?

Ressourcen:

Adrien Be
quelle
@chiragpatel versuchen Sie es selbst, indem Sie diese Live-Demo bearbeiten jsbin.com/leyukama/1
Adrien Be
Für alle Interessierten FF7 <ist heutzutage 0,05% der Firefox-Benutzer
Tom Tom
19

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-for -firefox-via-jquery /

RichieHindle
quelle
Das ist auf jeden Fall nützlich, danke! Scheint, als ob alle Browser außer Firefox die CSS-Eigenschaft unterstützen. Mit diesem Plugin sind die einzigen Personen, für die es nicht funktionieren würde, Firefox-Benutzer, die Javascript deaktiviert haben - und es ist sowieso eine gravierende Verschlechterung. Irgendeine Idee, wie die Auswirkungen auf die Leistung sind?
Sam Stokes
Nein, sorry ... Ich habe den Code im wirklichen Leben nicht verwendet, sondern nur mit der Demo gespielt. Es wäre einfach, die Demo zu nehmen und sie hundertmal auszuschneiden und in dieselbe Seite einzufügen.
RichieHindle
2
JavaScript truncate () (sei es eine Punktfolge für jQuery oder Prototype oder was auch immer) ist nur eine halbe Lösung, da sie die Zeichenbreite nicht berücksichtigt. Wenn Sie also Text aufgrund eines vordefinierten begrenzten Speicherplatzes abschneiden möchten, funktionieren diese Funktionen nur bei Verwendung von monospaced Schriftarten zuverlässig. Jede ernsthafte Lösung müsste mit Glyphen arbeiten, nicht mit der Anzahl der Zeichen.
Matthias
@Matthias: Vielleicht wurde der Code aktualisiert, seit Sie ihn getestet haben, aber ich habe mir gerade die Demo angesehen und sie funktioniert perfekt mit einer Schriftart mit variabler Breite.
RichieHindle
7

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

jj
quelle
6

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 besteht darin, dass das "..." hinzugefügt wird, 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 einfacheres Regelwerk.

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

Rajat
quelle
Das Problem mit Pseudocode ist, dass "..." immer noch abgeschnitten oder ausgeblendet wird, wenn Text überläuft. Ich hatte gehofft, dass bei einem Überlauf von Text sichergestellt wird, dass "..." angezeigt wird. Klar, das ist nicht der Fall :(
Antony
@Antony Positionieren Sie einfach das Pseudoelement: position: absolute; right: 0;(und vergessen Sie nicht position: relativedas reale Element, damit es funktioniert). Es wird sich jedoch mit dem Text überschneiden, sodass Sie möglicherweise auch eine Hintergrundfarbe hinzufügen möchten.
letztes Kind