Ankündigung

**Sempervivum** · 25.08.2020, 17:47

So etwas?
https://codepen.io/valerie-roske/pen/MyZoGx

**Testie** · 25.08.2020, 18:39

Hallo, in css benutzt man hierfür
text-overflow: ellipsis

Etwa so:

Code:

.truncate {
  display: inline-block;
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.truncate + a {
  display: inline-block;
  vertical-align: top;
  margin-top: -1px;
}

HTML-Code:

<div id="container">
  <p><span class="truncate">This is a text that should be truncated because it's too long</span><a href="#">Read more</a></p>
</div>

**ST747** · 25.08.2020, 18:51

hallo Testie,
bei dem 2. truncate ist noch ein + a.

wie funktiniert das + a , ist das für den link?

gerhard

**Testie** · 25.08.2020, 20:24

Hier ist das auf .truncate folgendes Element a gemeint. Also der Link.

Auch hier ganz gut erklärt https://www.mediaevent.de/css/css-se...tselektor.html

**Sempervivum** · 25.08.2020, 21:08

PS: Das Beispiel bei Codepen ist nicht so ganz optimal, weil sich der Hintergrund nicht automatisch anpasst. Dieses funktioniert bei jedem Hintergrund, auch Farbverlauf und Bild:

Code:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Collapsible Content - Fading</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        body {
            margin: 0;
            background-color: rgb(200, 200, 255);
        }
        section {
            height: 4em;
            overflow: hidden;
            transition: height 0.5s;
            position: relative;
        }
        section:not(.expanded) {
            mix-blend-mode: hard-light;
        }
        section:not(.expanded)::after {
            position: absolute;
            content: "";
            left: 0px;
            top: 0px;
            height: 100%;
            width: 100%;
            background: linear-gradient(transparent, gray);
            pointer-events: none;
        }
    </style>
</head>
<body>
    <button type="button">Mehr anzeigen</button>
    <section>
        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. 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. 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.
        Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
        feugiat
        nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
        augue duis
        dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
        nibh
        euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
        commodo
        consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
        illum
        dolore eu
        feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
        delenit
        augue duis dolore te feugait nulla facilisi.
        Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer
    </section>
    <script>
        document.querySelectorAll('button').forEach(btn => {
            btn.addEventListener('click', event => {
                const expandable = event.target.nextElementSibling;
                expandable.classList.toggle('expanded');
                if (expandable.classList.contains('expanded')) {
                    expandable.style.height = expandable.scrollHeight + 'px';
                } else {
                    expandable.style.height = '4em';
                }
            });
        });
    </script>
</body>
</html>

Quelle:
https://stackoverflow.com/questions/...acity-gradient

**Atlan** · 28.08.2020, 15:50

DANKE, an Alle, hat mir sehr geholfen.

grossen Text zum Ende hin ausblenden lassen

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

homepage-forum.de - Hilfe für Webmaster! Statistiken

Online-Benutzer

Die neuesten Themen

Die neuesten Beiträge

Ankündigung

grossen Text zum Ende hin ausblenden lassen