Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » CSS » CSS3: Texte beschneiden mit der Eigenschaft Text-Overflow

CSS3: Texte beschneiden mit der Eigenschaft Text-Overflow

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • 7 Kommentare
Lesedauer: 2 Minuten
  • von Denis Potschien
  • 12. April 2012

Inhaltsverzeichnis

Gerade in Tabellen sind Texte oder Wörter gerne mal zu lang und müssen entweder umgebrochen oder beschnitten werden. Mit der CSS-Eigenschaft „text-overflow“ lassen sich nicht nur Texte auf eine feste Breite beschneiden, sondern auch automatisch mit Auslassungszeichen versehen. Die Eigenschaft sorgt dafür, dass ein Text nur so viel Raum einnehmen kann, wie das umschließende Element groß ist. Anders als „overflow“ funktioniert „text-overflow“ allerdings nur in der Breite und nur bei einzeiligen Texten.

beschneiden CSS3: Texte beschneiden mit der Eigenschaft Text-Overflow

Beschneiden und mit Auslassungszeichen versehen

Neben der Standardeinstellung „clip“, die einen Text einfach am Rand des umschließenden Blockelementes beschneidet – auch mitten im Buchstaben – sorgt der Wert „ellipsis“ dafür, dass am Ende des beschnittenen Textes ein Auslassungs- beziehungsweise Ellipsenzeichen (…) hinzugefügt wird. Und Buchstaben bleiben dabei immer vollständig.

CSS3: Texte beschneiden mit der Eigenschaft Text-Overflow
Oben: Normal beschnittener Text | Unten: Mit „ellipsis“ beschnittener Text

Damit das Beschneiden funktioniert, muss das den Text umschließende Element ein Blockelement sein, welches per „overflow: hidden“ dazu gebracht wird, den darin enthaltenen Text nicht um die Breite des Textes zu vergrößern. Außerdem muss per „white-space: nowrap“ dafür gesorgt werden, dass der Text am Ende des Blockelementes nicht in die nächste Zeile umbricht:

p {
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Die Eigenschaft „text-overflow“ funktioniert mit allen gängigen Browsern. Allerdings erwarten der Internet Explorer und Opera die jeweiligen Vendor-Prefixe.

Beidseitige Beschneidung

Bei Gecko-Browsern lässt sich ein Text sowohl am Anfang als auch am Ende beschneiden. Dazu muss der Text von einem weiteren Element umschlossen werden:

<p><span style="margin-left: 20px">Dampfschiffahrtsgesellschaft</span></p>

Das zweite Element – hierbei kann es sich um ein Inlineelement handeln – verschiebt man per „margin-left“ nach links aus dem Blockelement. Da das übergeordenete Blockelement auf „overflow: hidden“ gesetzt ist, verschwindet der Text also links.

Nun muss bei der Eigenschaft „text-overflow“ ein weiterer Wert angegeben werden:

p {
  …
  text-overflow: ellipsis ellipsis;
}

Hat „text-overflow“ nur einen Wert, gilt er für die Bescheidung des Textes am rechten Rand. Bei zwei Werten steht der erste für die Beschneidung am linken, und der zweite für die Beschneidung am rechten Rand.

CSS3: Texte beschneiden mit der Eigenschaft Text-Overflow
Beidseitig beschnittener Text

So lassen sich – allerdings eben nur in Gecko-Browsern – Texte auch beiseitig beschneiden.

[Bildquellenangabe Scherenmännchen: Silke Kaiser / pixelio.de]

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

Arit Services Logo.

ARIT Services GmbH

Laatzen

Wolli Ruf Mediendesign Agentur Freiburg.

wolli ruf – mediendesign

Freiburg im Breisgau

Agentur novomyo Logo.

novomyo – Online Marketing Agentur

Hamburg

Evergreen Media Innsbruck Logo.

Evergreen Media®

Innsbruck

Tikal e-Commerce Agentur Hamburg Logo.

TIKAL Communication E-Commerce Agentur Hamburg

Hamburg

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Digitalagentur finden

Wir unterstützen Sie bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur finden

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Foto der Inhaberin einer Social Media Agentur, umrahmt von einem Laptop und zur Linken zwei Bewertungen der Agentur.
WordPress

WordPress Agentur finden

Wir unterstützen Sie bei der Auswahl Ihrer WordPress Agentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→

7 Antworten zu „CSS3: Texte beschneiden mit der Eigenschaft Text-Overflow“
— was ist Deine Meinung?

  1. biwebco sagt:
    13. April 2012 um 12:43 Uhr

    Was ist mit Browser Unterstützung, besonders mit IE7-8?
    Danke.

    Antworten
    1. Denis Potschien sagt:
      15. April 2012 um 9:37 Uhr

      Folgende Browser unterstützen die Eigenschaft: IE6+, Firefox 7+, Chrome 1+, Safari 1.3+, Opera 11+.

      Antworten
      1. Billy Galinos sagt:
        16. April 2012 um 1:36 Uhr

        IE und Opera aber nur so?

        -ms-text-overflow
        -o-text-overflow

  2. Thorsten sagt:
    12. April 2012 um 21:59 Uhr

    Interessante Sache!

    Kennt jemand zufällig auch eine Lösung für mehrzeilige Texte?

    Antworten
    1. Need_you sagt:
      13. April 2012 um 11:34 Uhr

      Würde mich auch sehr interessieren!

      Antworten
    2. Denis Potschien sagt:
      15. April 2012 um 9:34 Uhr

      Für mehrzeilige Texte gibt es meines Wissens keine Lösung mit „text-overflow“. Das Ganze funktioniert nur mit einzeiligen Texten.

      Antworten
  3. Billy Galinos sagt:
    12. April 2012 um 15:23 Uhr

    Interessanter Artikel, aber…

    „Die Eigenschaft „text-overflow“ funktioniert mit allen gängigen Browsern. Allerdings erwarten der Internet Explorer und Opera die jeweiligen Vendor-Prefixe.“

    …warum nicht gleich diese „Verdor-Prefixe“ im Artikel angeben?

    Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑