| 

.NET C# Java Javascript Exception

4
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?
01.07.2014
Slashi
Slashi
409 ● 2 ● 8
2 Antworten
3
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
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
3
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
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!