mozilla
Ihre Suchergebnisse

    text-overflow

    Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

    Zusammenfassung

    Die text-overflow CSS Eigenschaft bestimmt, wie überlaufende Inhalte die nicht angezeigt werden (Siehe overflow) dem Nutzer signalisiert werden. Sie können abgeschnitten (clipped) oder durch ein Auslassungszeichen ( '', U+2026 Horizontal Ellipsis) beziehungsweise eine vom Webautor definierte Zeichenfolge markiert sein.

    text-overflow.png

    Das Abschneiden des überlaufenden Texts findet exakt am Rand des Inhaltselements statt. Um erst nach einem vollen Zeichen abzuschneiden kann eine leere benutzerdefinierte Zeichenfolge angegeben werden (' ').

    Diese Eigenschaft beeinflusst nur Inhalte welche aus einem Blockelement in dessen inline-Richtung überlaufen (beispielsweise wird Text der am unteren Ende eines Kastens überläuft nicht beeinflusst). Textüberlauf kann auftreten wenn ein Text-wrapping verhindert wird (z.B., durch ‘white-space:nowrap’) oder wenn ein einzelnes Wort zu lang ist.

    Diese CSS Eigenschaft erzwingt keinen Textüberlauf; um dies zu erreichen und somit die text-overflow-Eigenschaft anzuwenden muss der Autor dem Element weitere Eigenschaften zuweisen, unter anderem den overflow auf hidden setzen.

    • Standardwert clip
    • Anwendbar auf block container Elemente
    • Vererbt Nein
    • Prozentwerte
    • Medium visuell
    • Berechneter Wert siehe Spezifikation
    • Animierbar Nein
    • Canonical order the unique non-ambiguous order defined by the formal grammar

    Syntax

    Formal syntax: [ clip | ellipsis | <string> ]{1,2}
    /* Syntax mit einem Wert: Der Wert beschreibt den Überlauf der am Ende einer Zeile ausgeführt wird (rechtes Ende wenn ltr, linkes Ende wenn rtl) */
    text-overflow: clip
    text-overflow: ellipsis
    text-overflow: "…"
    
    /* Syntax mit zwei Werten: Der erste Wert beschreibt den Überlauf am linken, der zweite Wert den am rechten Zeilenende. Die Textrichtung hat hierauf keinen Einfluss. */
    
    text-overflow: clip ellipsis
    text-overflow: "…" "…"
    
    text-overflow: inherit

    Werte

    clip
    Dieses Schlüsselwort führt dazu, dass Text genau am Ende des Inhaltsbereichs abgeschnitten wird. Daher kann der Schnitt auch innerhalb eines Zeichens geschehen. Um am Übergang zwischen zwei Zeichen zu schneiden muss eine leere Zeichenfolge ('') genutzt werden. Der Wert clip ist der Standardwert für diese CSS-Eigenschaft.
    ellipsis
    Dieses Schlüsselwort führt dazu, dass ein Auslassungszeichen ('…', U+2026 Horizontal Ellipsis) an der Schnittstelle angezeigt wird um abgeschnittenen Text zu repräsentieren. Dieses Auslassungszeichen wird innerhalb des Inhaltsbereichs angezeigt, wodurch die Menge des angezeigten Texts verringert wird. Wenn nicht genug Platz für das Auslassungszeichen selbst zur Verfügung steht wird es abgeschnitten.
    <string>
    Der <string> welcher zur Anzeige des abgeschnittenen Texts genutzt werden soll. Diese Zeichenfolge wird innerhalb des Inhaltsbereichs angezeigt und führt dazu, dass die Menge des angezeigten Texts verringert wird. Wenn nicht genug Platz für die Zeichenfolge selbst zur Verfügung steht wird sie abgeschnitten.
     

    Beispiele

    p {
      white-space: nowrap;
      width: 100%;                   
      overflow: hidden;              /* "overflow"-Wert darf nicht "visible" sein */ 
    
      text-overflow:    ellipsis;
    }
    
    CSS-Wert direction: ltr direction: rtl
    Erwartetes Ergebnis Live-Ergebnis Erwartetes Ergebnis Live-Ergebnis
    visible overflow 1234567890
    1234567890
    0987654321
    1234567890
    text-overflow: clip t-o_clip.png
    123456
    t-o_clip_rtl.png
    1234567890
    text-overflow: '' 12345
    123456
    54321
    1234567890
    text-overflow: ellipsis 1234…
    1234567890
    …4321
    1234567890
    text-overflow: '.' 1234.
    1234567890
    .4321
    1234567890
    text-overflow: clip clip 123456
    1234567890
    654321
    1234567890
    text-overflow: clip ellipsis 1234…
    1234567890
    6543…
    1234567890
    text-overflow: clip '.' 1234.
    1234567890
    6543.
    1234567890
    text-overflow: ellipsis clip …3456
    1234567890
    …4321
    1234567890
    text-overflow: ellipsis ellipsis …34…
    1234567890
    …43…
    1234567890
    text-overflow: ellipsis '.' …34.
    1234567890
    …43.
    1234567890
    text-overflow: ',' clip ,3456
    1234567890
    ,4321
    1234567890
    text-overflow: ',' ellipsis ,34…
    1234567890
    ,43…
    1234567890
    text-overflow: ',' '.' ,34.
    1234567890
    ,53.
    1234567890

    Spezifikationen

    Spezifikation Status Kommentar
    CSS Basic User Interface Module Level 3
    Die Definition von 'text-overflow' in dieser Spezifikation.
    Unknown  

    Eine vorherige Version dieser Schnittstelle erreichte den Candidate Recommendation-Status (CR). Da einige der nicht aufgeführten gefährdeten Eigenschaften entfernt werden mussten, wurde die Spezifikation auf Working Draft-Niveau herabgesetzt. Das erklärt, weshalb Browser diese Eigenschaft ohne Präfix, jedoch nicht im CR-Zustand, umgesetzt haben. Momentan hat die Spezifikation das Editor's Draft-Niveau erreicht.

    Browserkompatibilität

    Eigenschaft Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Grundlegende Unterstützung 1.0 (312.3) 7.0 (7.0) (Siehe Hinweise) 6.0 (Siehe Hinweise) 9-o (Siehe Hinweise)
    11.0
    1.3 (312.3)
    Syntax mit zwei Werten Not supported 9.0 (9.0) Not supported Not supported Not supported
    String-Werte Not supported 9.0 (9.0) Not supported Not supported Not supported
    Eigenschaft Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Grundlegende Unterstützung (Yes) 7.0 (7.0) ? (Yes) (Yes)
    Syntax mit zwei Werten  Not supported 9.0 (9.0) Not supported Not supported Not supported
    String-Werte Not supported 9.0 (9.0) Not supported Not supported Not supported

    Hinweise zu Gecko

    Ab Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7), wurde die Handhabung von text-overflow in Blockelement mit inline-overflow auf beiden horizontalen Seiten korrigiert. Bisher wurde bei Angabe eines Wertes (wie z.B. text-overflow:ellipsis;) die Auslassung auf beiden Seiten durchgeführt anstatt nur an dem durch die Laufrichtung definierten Ende.

    Hinweise zu Internet Explorer

    Internet Explorer 8 führte die Präfix-Version, -ms-text-overflow, gleichbedeutend mit text-overflow ein. Diese Präfix-Version sollte nicht verwendet werden.

    Hinweise zu Opera

    Opera 9 und 10 benötigen die Präfix-Version, -o-text-overflow.

    Siehe auch

    Schlagwörter des Dokuments und Mitwirkende

    Schlagwörter: 
    Mitwirkende an dieser Seite: DavidArndt
    Zuletzt aktualisiert von: DavidArndt,