Kürzen lange Strings mit CSS: machbar noch?

https://stackoverflow.com/questions/802175

03-07-2019
|

Frage

Gibt es eine gute Möglichkeit, Text mit einfachen HTML und CSS von Kürzen, so dass dynamische Inhalte in einem feste Breite-und-height Layout passen?

Ich habe durch serverseitige worden Kürzen logische Breite (dh einer blind-vermutete Anzahl der Zeichen), aber da ein ‚w‘ ist breiter als ein ‚i‘ ist dies jedoch häufig nicht optimal zu sein, und verlangt von mir auch neu zu erraten (und halten Zwicken) die Anzahl der Zeichen für jede feste Breite. Im Idealfall würde das Abschneiden im Browser passieren, die die physische Breite des gerenderten Textes kennt.

Ich habe festgestellt, dass der IE eine text-overflow: ellipsis Eigenschaft hat, dass genau das tut, was ich will, aber ich brauche diese Cross-Browser zu sein. Diese Eigenschaft scheint zu sein (etwas?) -Standard aber nicht von Firefox unterstützt. Ich habe festgestellt verschiedene Abhilfen auf overflow: hidden basiert, aber sie entweder nicht ein Auslassungszeichen angezeigt werden (ich möchte der Benutzer den Inhalt war verkürztes wissen), oder es die ganze Zeit angezeigt werden (auch wenn der Inhalt nicht abgeschnitten wurde).

Hat jemand eine gute Möglichkeit der Anprobe dynamischen Textes in einem festen Layout hat, oder ist die serverseitige Abschneiden durch logische Breite so gut, wie ich jetzt bekommen werde?

Lösung

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

Justin Maxwell hat Cross-Browser CSS-Lösung. Es ist mit dem Nachteile jedoch nicht so dass der Text in Firefox ausgewählt werden. Schauen Sie sich seinen Gastbeitrag auf Matt Snider Blog für die vollständigen Angaben über wie das funktioniert.

Beachten Sie diese Technik verhindert auch den Inhalt des Knotens in JavaScript Aktualisierung der innerHTML Eigenschaft in Firefox. Finden Sie am Ende dieses Beitrags für dieses Problem zu umgehen.

CSS

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

ellipsis.xml Datei Inhalt

<?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 Knoteninhalt

den Inhalt eines Knotens in einer Art und Weise zu aktualisieren, die folgenden 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 Snider Beitrag für eine Erklärung, wie das funktioniert .

Andere Tipps

März 2014: Kürzen lange Strings mit CSS: eine neue Antwort mit Fokus auf Browser-Unterstützung

Demo auf http://jsbin.com/leyukama/1/ (ich benutze jsbin weil es unterstützt ältere Version des IE).

<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 -ms-Text-Überlauf CSS-Eigenschaft ist nicht erforderlich. Es ist ein Synonym für die Text-Überlauf CSS-Eigenschaft, aber IE-Versionen 6 bis 11 bereits die Text-Überlauf CSS-Eigenschaft unterstützen

Erfolgreich getestet (auf Browserstack.com) unter Windows OS, für Web-Browser:

IE6 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) wies darauf hin, nur Firefox den Text-Überlauf CSS-Eigenschaft von Firefox unterstützen 7 an (veröffentlicht 27. September 2011)

Ich doppelt dieses Verhalten auf Firefox geprüft 3.0 & Firefox 6.0 (Text-Überlauf wird nicht unterstützt).

Einige weitere Tests auf einem Mac OS Web-Browser benötigt wird.

Hinweis: Sie können einen Tooltip auf Mausbewegung zeigen wollen, wenn ein Auslassungszeichen angewendet wird, kann dies über Javascript getan werden, finden Sie diese Fragen: HTML-Text-Überlauf Auslassungs Erkennung und HTML - wie kann ich zeigen Tooltip nUR wenn Auslassungs

Ressourcen:

Wenn Sie mit einer JavaScript-Lösung OK sind, gibt es ein jQuery-Plug-in diese in einer Cross-Browser-Mode zu tun - siehe http://azgtech.wordpress.com/2009/07/26/text-overflow-ellipsis-for-firefox-via -jquery /

OK, Firefox 7 implementiert text-overflow: ellipsis sowie text-overflow: "string". Final Release ist für 2011-09-27 geplant.

Eine andere Lösung des Problems könnte der folgende Satz von CSS-Regeln sein:

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

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

Der einzige Nachteil mit dem obigen CSS ist, dass es die „...“ unabhängig von füge hinzu, ob der Text-Überlauf des Behälters oder nicht. Dennoch, wenn Sie einen Fall, in dem Sie eine Reihe von Elementen haben und sind sicher, dass der Inhalt überlaufen wird, wäre dies ein eine einfachere Vorschriften sein.

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

Als Referenz ist hier ein Link zu dem "Bug" Tracking Text-Überlauf: Auslassungs Unterstützung in Firefox . Klingt wie Firefox den einzigen großen Browser links ist, die nicht über eine native CSS-Lösung nicht unterstützt.

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow