Texte in einem Div kürzen ab der 3. Zeile mit "..."

Reschke

Hallo zusammen,

zunächst muss ich sagen, dass ich noch blutiger Anfänger bin.

Ich habe ein Div mit fester größe, sodass genau 3 Zeilen Text rein passen (dieses Div gibt es öfters mit verschiedenen Texten), nur sollen die Texte wenn Sie mehr als 3 Zeilen benötigen würden "abgeschnitten" werden.

Allerdings soll der Text dann am Ende auch entsprechend mit "..." versehen werden.

Ich kenne folgende Möglichkeit, wenn es sich nur um eine Textzeile handelt:

HTML

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

[FONT=&quot]
[/FONT]
Das abschneiden an sich ist kein Problem, allerdings schaffe ich es nicht dass das mit den "..." am ende der dritten Zeile funktioniert.

Kann mir jemand helfen?

Vielen Dank vorab für eure Antworten.

Gruß Reschke

Arne Drews

Hi,

Auf die Schnelle würde mir einfallen, den Text in dem DIV zusätzlich in einem SPAN zu kapseln und diesem dann die Punkte anzuhängen.
Entweder HTML:

HTML

<div class="threerowtextcontainer">
    <span class="threerowsoftext">foo bar and many words more till three rows are still arrived</span>...
</div>

oder per CSS:

Code

SPAN.threerowsoftext::after { content:"..." }

Aber: untegestet! Ist nur ein schneller Gedanke...

Reschke

Hallo,

vielen Dank für die rasche Antwort.

Habs auch schon ausprobiert, allerdings noch nicht hinbekommeb.
Ich habe das overflow:hidden im threerowtextcontainer.

Eine andere Lösung würde mir nicht einfallen.

Dementsprechend habe ich die Vermutung, dass diese ... leider aus dem Div fallen und darum nicht angezeigt werden, es sei denn der Text ist sowieso kürzer als 3 Zeilen.

Aber muss das ganze heute Abend nochmal genauer ausprobieren... muss jetzt leider noch ein paar andere Sachen erledigen.

Anschließend gebe ich nochmals eine Rückmeldung.

Gruß Reschke

djheke

Oder mit dem Input hack

HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Aufklappbarer Text</title>
<style>


#textbox {
 float:left;
 width:50%;
 padding:15px;
 border:1px solid #000;
 box-shadow:0 0 5px #888;
 border-radius:5px;
}


#textbox p { 
 display:inline; /* Optional, wenn Linktext am Text anschließen soll. */
}


#textbox input {
 display:none;
}
#textbox input:checked  ~ p span {
 position:relative;
 left:0;
 top:0;
/*oder
 font-size:1rem;
*/
}
#textbox label {
 text-decoration:underline;
 cursor:pointer;
 color:blue;
 display:inline;
}
#textbox input ~ label:before {
 content:"mehr..";
}
#textbox input:checked ~ label:before {
 content:"weniger";
}
#textbox  p span {
 position:absolute;
 left:-999999rem;
 top:-99999rem;
/*oder
 font-size:0;
*/
}


</style>
</head>
<body>
<div id="textbox">
 <input type="checkbox" name="weiter" id="weiter">  
   <h3>Lorem ipsum</h3>
    <p>
     dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.takimata sanctus est Lorem ipsum dolor sit
       <span>
         dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
       </span>
    </p>
  <label for="weiter">.</label>        
</div>   
</body>
</html>

Alles anzeigen

Wobei es mit Focus-Funktionalität reichen würde.

HTML

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Komplette Zeilen bei unterschiedlicher Schriftgröße</title>
<style>
* {
 margin:0;
 padding:0;
 list-style:none;
 text-decoration:none;
}


div {
 margin:10px;
 padding:0 5px;
 border:1px solid #000;
 border-radius:5px;
 box-shadow:0 0 5px #000;
 overflow:hidden;
 float:left;
 -width:300px;
 height:4.5em; /*Vorgabehöhe:  1.5em(line-height) x 3 Zeilen = 15em */
 font-size:1em;
 line-height:1.5em;
 position:relative;
}


div:hover {
 height:auto;
}


div:after {
 content:"...";
 display:block;
 position:absolute;
 background:#fff;
 font-weight:bold;
 right:5px;
 bottom:1px;
}


div:hover:after {
 content:none;
}
</style>
</head>


<body id="home">
<div>
<p>
Lorem ipsum dolor sit amet, con sectet uer adip iscing elit. Aenean commodo 
ligula eget dolor. Aenean massa. Cum sociis 
natoque penatibus et magnis. Lorem ipsum dolor sit amet, con sectet uer adip iscing elit.
Lorem ipsum dolor sit amet, con sectet uer adip iscing elit. Aenean commodo 
ligula eget dolor. Aenean massa. Cum sociis 
natoque penatibus et magnis. Lorem ipsum dolor sit amet, con sectet uer adip iscing elit.
Lorem ipsum dolor sit amet, con sectet uer adip iscing elit. Aenean commodo 
ligula eget dolor. Aenean massa. Cum sociis 
natoque penatibus et magnis. Lorem ipsum dolor sit amet, con sectet uer adip iscing elit.
</p>
</div>


</body></html>

Alles anzeigen

Reschke

Vielen Dank für die Antworten.

Zur ersten Antwort: Habe wirklich viel ausprobiert, glaube aber dass es damit nicht realisierbar, da die "..." immer mit abgeschnitten werden wenn der Text zu lang ist.

Zur zweiten Antwort: Ich hätte vielleicht dazu sagen sollen, dass die gekürzten Texte gar nicht komplett zu sehen sein müssen. Auf jeden Fall ist das ne Super Sache aber in diesem Fall leider nicht das richtige für mich.

Habe jetzt allerdings eine Möglichkeit gefunden, die auf Anzahl der Zeichen basiert gefunden:

HTML

function shortText($string,$lenght) {                            


if(strlen($string) > $lenght) {                                
$string = substr($string,0,$lenght)."...";                                   
$string_ende = strrchr($string, " ");                                
$string = str_replace($string_ende," ...", $string);                            
}

return $string;

}


$longtext = " Guten ABend ich hoffe wir finden eine Loesung die passend ist und so weiter und so weiter.";


echo shortText ($longtext,70);

Alles anzeigen

Gibt es eine Möglichkeit diese Funktion auf meinen HTML Seiten einzubinden, sodass diese sich alle Texte mit einer Klasse auf 70 Zeichen kürzt?

djheke

Keine Ahnung, was Du willst, aber hier mal JQuery >http://www.aakashweb.com/demos/jquery-collapser/
Und hier nochmal mein Vorschlag > http://gipspferd.de/forumhilfe/text-kuerzen.html

modem-kind

find ich cool djheke

das Div:after ----- is top !
background-image: linear-gradient(to right, transparent 0%, #fff 70%);

Reschke

Wow, vielen Dank djheke!

Das "background-image: linear-gradient(to right, transparent 0%, #fff 70%);" ist echt eine Top! alternative zu den "..." (pünktchen).
Einfache Lösung auf die man erstmal kommen muss, genial!

Vielen Dank für die Hilfe, jetzt schau ich mich noch in die JQuery Möglichkeit ein, und dann überlege was ich tue.

Beste Grüße

Reschke

Tags