Mehrzeilige Texte kürzen: Eine praktische CSS-Technik

Einführung

In diesem Lab werden wir lernen, wie man mehrzeilige Texte kürzt, die die Abmessungen ihres Containers überschreiten. Diese Technik ist nützlich, um Auszüge aus längeren Texten anzuzeigen, während man ein sauberes und organisches Design erhält. Mit CSS-Eigenschaften wie overflow, height und background können wir einen visuell ansprechenden Kürzungseffekt erstellen, der die Benutzererfahrung verbessert.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/BasicStylingGroup -.-> css/text_styling("Text Styling") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/positioning("Positioning") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") css/IntermediateStylingGroup -.-> css/pseudo_elements("Pseudo-elements") subgraph Lab Skills css/selectors -.-> lab-35252{{"Mehrzeilige Texte kürzen"}} css/colors -.-> lab-35252{{"Mehrzeilige Texte kürzen"}} css/text_styling -.-> lab-35252{{"Mehrzeilige Texte kürzen"}} css/width_and_height -.-> lab-35252{{"Mehrzeilige Texte kürzen"}} css/positioning -.-> lab-35252{{"Mehrzeilige Texte kürzen"}} css/backgrounds -.-> lab-35252{{"Mehrzeilige Texte kürzen"}} css/pseudo_elements -.-> lab-35252{{"Mehrzeilige Texte kürzen"}} end

Mehrzeilige Texte kürzen

index.html und style.css wurden bereits in der VM bereitgestellt.

Um Text zu kürzen, der länger als eine Zeile ist, folgen Sie diesen Schritten:

Verwenden Sie overflow: hidden, um zu verhindern, dass der Text seine Abmessungen überschreitet.
Legen Sie eine feste width von 400px fest, um sicherzustellen, dass das Element mindestens eine konstante Dimension hat.
Legen Sie height: 109.2px fest, wie berechnet aus der font-size, mit der Formel font-size * line-height * numberOfLines (in diesem Fall 26 * 1.4 * 3 = 109.2).
Fügen Sie die Klasse truncate-text-multiline zum p-Element in Ihrer HTML hinzu.
Legen Sie font-size: 26px und line-height: 1.4 in der CSS für die .truncate-text-multiline-Klasse fest.
Legen Sie color: #333 und background: #f5f6f9 fest, um den Text zu gestalten.
Um einen Farbverlauf von transparent zu der background-color zu erstellen, fügen Sie die folgenden CSS-Regeln zum .truncate-text-multiline::after-Pseudo-Element hinzu:

.truncate-text-multiline::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 150px;
  height: 36.4px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), #f5f6f9 50%);
}

Dies wird einen Farbverlauf-Container mit einer Höhe von 36.4px erstellen, berechnet für den Farbverlauf-Container, basierend auf der Formel font-size * line-height (in diesem Fall 26 * 1.4 = 36.4). Das ::after-Pseudo-Element ist in der unteren rechten Ecke des .truncate-text-multiline-Elements positioniert.

Bitte klicken Sie auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite zuvorschauen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lab "Mehrzeilige Texte kürzen" abgeschlossen. Sie können in LabEx weitere Labs ausprobieren, um Ihre Fähigkeiten zu verbessern.