Hallo auch.
Ich möchte mittels CSS nur einen bestimmten Teil eines Textes anzeigen lassen, der Rest soll versteckt sein. Zum Beispiel wenn man einen Text in der Form "Ein langer Eintrag[Mit Zusatztext]" hat, soll nur der erste Teil, ohne die eckigen Klammern angezeigt werden. Ich weiß das ich dies mit Javascript umsetzen könnte. Das ist in diesem Fall allerdings nicht möglich. Ich kann nur CSS verwenden, Javascript steht leider nicht zur Verfügung. Gibt es hier möglichst einfache Möglichkeiten?
Hallo
Nein.
Gruss
MrMurphy
Zieh dir das mal rein. Ist evtl. dass, was du erreichen möchtest.
https://elbnetz.com/elemente-nur-mit-css-ein-und-ausblenden/
Hier mal eine ältere Version .
<!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;
box-sizing:border-box;
}
div {
margin:10px;
padding:1em;
border:1px solid #000;
border-radius:5px;
box-shadow:0 0 5px #000;
width:300px;
float:left;
position:relative;
}
div p {
overflow:hidden;
float:left;
max-height:4.5em; /*Vorgabehöhe: 1.5em(line-height) x 3 Zeilen = 4.5em */
min-height:4.5em;
font-size:1em;
line-height:1.5em;
}
div:hover p , div:focus p {
max-height:none;
height:auto;
}
div:after {
content:"";
position:absolute;
width:10em;
height:1.5em;
background-image: linear-gradient(to right, transparent 0%, #fff 70%);
font-weight:bold;
right:5px;
bottom:1em;
}
div:hover:after , div:focus:after {
content:none;
}
h3 {
padding-bottom:1em;
}
</style>
</head>
<body>
<div tabindex="0">
<h3>Überschrift</h3>
<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>
<div tabindex="0">
<h3>Überschrift</h3>
<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.
</p>
</div>
<div tabindex="0">
<h3>Überschrift</h3>
<p>
Guten ABend ich hoffe wir finden eine Loesung.
</p>
</div>
</body></html>