Lange Zeichenfolgen mit CSS abschneiden: Noch 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 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?

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 .

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:

• https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow#Browser_compatibility
• http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
• https://stackoverflow.com/a/1101702/759452
• http://www.browsersupport.net/CSS/text-overflow
• http://caniuse.com/text-overflow
• http://msdn.microsoft.com/en-us/library/ie/ms531174(v=vs.85).aspx
• http://hacks.mozilla.org/2011/09/whats-new-for-web-developers-in-firefox-7/

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 /

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.

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