CSS Textumbrüche / Text abschneiden @CODEKICKER

CSS Textumbrüche / Text abschneiden

Hallo,

ich habe aktuell vor, einen Text innerhalb eines Containers (DIV) bei Überlänge abzuschneiden. Um zu symbolisieren das der eigentlich Text noch länger ist, soll dieser mit drei Punkten am Ende gekennzeichnet sein.

In dem Beispiel (Container 1) habe ich das für 1-zeiligen Content bereits hinbekommen, jedoch schaffe ich es nicht das ganze so zu gestallten, dass bei mehreren Zeilen ebenfalls die 3 Punkte angehangen werden (Container 2).

Beispiel

Hat jemand eine Idee, wie man das Problem lösen kann?

News:

01.07.2014

Slashi

409 ● 2 ● 8

2 Antworten

Es gibt einen kleinen Trick den du verwenden kannst: Beispiel

.containerIn2 {
  position: relative;
  ...
}

.containerIn2:after {
  content: "...";
  text-align: right;
  position: absolute;
  bottom: -2px;
  right: 0;
  width: 1em;
  height: 1.2em;
  background: white;
}

Könnte man auch mit linear-gradient kombinieren um "auszufaden".

02.07.2014

Floyd

14,6k ● 3 ● 9

		Ah, von diesem Trick hatte ich bereits gelesen, es aber erst jetzt richtig verstanden! Danke – Slashi 02.07.2014
		Kein Problem :) – Floyd 02.07.2014

Das funktioniert so nur mit einzeiligem Text.

Wenn Dir ein jQuery Plugin hilft, wirst Du hier fündig: jQuery dotdotdot...
Ansonstten google mal nach "text-overflow ellipsis multiline", dort findest Du auch paar andere Lösungsansätze

01.07.2014

Jaksa

4,0k ● 1 ● 8

Auch eine sehr gute Variante. Auch um andere Formatierungen in dem Bereich möglich zu machen! Danke für den Hinweis.

– Slashi 02.07.2014

Stelle deine Html-Frage jetzt!

Kontakt, Impressum, Lizenz, AGB