Ankündigung

Einklappen
Keine Ankündigung bisher.

grossen Text zum Ende hin ausblenden lassen

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • grossen Text zum Ende hin ausblenden lassen

    Hallo,
    auf FB habe ich eine Seite mir angeschaut, die folgendes macht:
    - Ein Text so um die 4 / 5 Zeilen, wird zum Ende zu immer mehr ausgeblendet. (also der Hintergrundfarbe angepasst).
    -- um dann auf einem Link zu enden der, beim anklicken, denn ganzen Text ( 1 bis 2 Seiten ) in einem neuen Fenster aufrufft.
    wie kann man das in html, css oder JS verwirklichen.
    Leider ist mein english not so gut um das in den grossen Foren zu suchen oder zu beschreiben.
    Wer weiss was ?
    Danke


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

    Kommentar


    • #3
      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>

      Kommentar


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

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

        gerhard

        Kommentar


        • #5
          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

          Kommentar


          • #6
            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
            Zuletzt geändert von Sempervivum; 25.08.2020, 21:13.

            Kommentar


            • #7
              DANKE, an Alle, hat mir sehr geholfen.

              Kommentar

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

              Einklappen

              Themen: 56.721   Beiträge: 429.268   Mitglieder: 28.479   Aktive Mitglieder: 47
              Willkommen an unser neuestes Mitglied, masterplaner.

              Online-Benutzer

              Einklappen

              229 Benutzer sind jetzt online. Registrierte Benutzer: 5, Gäste: 224.

              Mit 3.502 Benutzern waren am 23.01.2020 um 17:20 die meisten Benutzer gleichzeitig online.

              Die neuesten Themen

              Einklappen

              Die neuesten Beiträge

              Einklappen

              Lädt...
              X