Heim > Artikel > Web-Frontend > Erste Schritte: CSS-Erweiterung beim Schweben oder Fokus abschneiden

Erste Schritte: CSS-Erweiterung beim Schweben oder Fokus abschneiden

WBOYnach vorne: 2023-08-25 21:45:02936Durchsuche

入门 CSS 悬停或焦点时截断展开

Die Textdarstellung ist ein wichtiger Faktor im Webdesign, der sich auf die Benutzererfahrung und die Lesbarkeit der Website auswirkt. Wenn Ihr Text korrekt und geordnet angezeigt wird, werden Benutzer ihn leicht verstehen und so auf Ihre Website aufmerksam gemacht. Manchmal ist der Text jedoch zu lang für den vorgesehenen Platz auf einer Webseite. Um diesen Text korrekt anzuzeigen, verwenden wir die Truncate-Methode. Primer CSS bietet diese Methode, mit der Sie Text nicht nur abschneiden, sondern ihn auch mit Hover- oder Fokuseffekten erweitern können. In diesem Artikel besprechen wir, wie das funktioniert und welche Klassen uns das ermöglichen.

Erste Schritte mit CSS

Primer CSS ist ein leistungsstarkes Open-Source-CSS-Framework, das es Entwicklern ermöglicht, konsistente und professionelle Frontends für Webanwendungen und Websites zu erstellen. Es wurde vom GitHub Design System entworfen. Es bietet einen vielseitigen Satz integrierter Komponenten wie Typografie, Schaltflächen, Warnungen, Kürzung, Menüs, Navigation usw., die einfach zu verwenden sind und viel Zeit sparen. Darüber hinaus bietet es eine ausführliche Dokumentation, damit Einsteiger jederzeit loslegen können. Es verfügt über vordefinierte Klassen zum Abschneiden von überlaufendem Text auf Webseiten.

Bevor wir eine Klasse in Primer CSS verwenden, müssen wir sie von npm installieren -

npm install --save @primer/css

Oder verwenden Sie den CDN-Link im HTML-Code -

<link href= "https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel= "stylesheet" />

Kürzung und Erweiterung beim Schweben oder im Fokuszustand

Um abgeschnittenen Text beim Schweben oder Fokussieren zu erweitern, verfügt Primer CSS über integrierte Klassen. Diese Kurse sind wie folgt -

Truncate-text – Wird zum Abschneiden von Text verwendet
Truncate-text--expandable – Wird verwendet, um abgeschnittenen Text beim Schweben oder Fokussieren zu erweitern.

Beispiel

In diesem Beispiel verwenden wir die vordefinierte Box-Klasse, um ein div-Element in eine Box mit veränderbarer Größe umzuwandeln. Hier ist p-1 eine Klassenkürzel für das Hinzufügen von 4 Pixeln (0,25 rem) Polsterung auf allen Seiten der Box.

Als nächstes haben wir das Stilattribut zum Hinzufügen des gewünschten Stils zur Box. Wir setzen den Wert des Attributs resize auf horizontal, sodass der Benutzer die Größe des Felds horizontal ändern kann, indem er es einfach aus der rechten Ecke zieht. Um einem Element eine horizontale Bildlaufleiste hinzuzufügen, verwenden wir das Attribut "overflow:scroll". Durch die Verwendung horizontaler Bildlaufleisten können Benutzer beim horizontalen Scrollen von Text verborgene Inhalte sehen.

Als nächstes erstellen wir ein Element, das ein Anker-Tag enthält, das gekürzt wird, damit es in die Box passt. Truncate-text ist eine Klasse, die zum Abschneiden von Text innerhalb eines Ankertags definiert ist, während die Klasse Truncate-text--expandable integriert ist, um Benutzern das Erweitern zu ermöglichen, wann immer sie mit der Maus darüber fahren oder auf abgeschnittenen Text fokussiert sind.

<html>
<head>
   <link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" />
</head>
<body>
   <h1 style="margin: 10px"> Primer CSS Truncate Expand on hover or focus state </h1>
   <p style="margin: 10px"> Following we have different truncated text which expands on hovering. </p>
   <br>
   <div class="Box p-1" style="resize: horizontal; overflow: scroll; margin: 10px">
      <div class="Truncate">
         <a href="#" class="Truncate-text Truncate-text--expandable"> This is the text. JavaScript Python CSS HTML C/C++ Angular React MongoDB SQL Django Bootstrap Tailwind NextJs Typescript Java ExpressJs Vue.Js Laravel </a>
         <a href="#" class="Truncate-text Truncate-text--expandable"> This is the text. JavaScript Python CSS HTML C/C++ Angular React MongoDB SQL Django Bootstrap Tailswind NextJs Typescript Java ExpressJs VueJs Laravel </a>
         <a href="#" class="Truncate-text Truncate-text--expandable"> This is the text. JavaScript Python CSS HTML C/C++ Angular React MongoDB SQL Django Bootstrap Tailswind NextJs Typescript Java ExpressJs VueJs Laravel </a>
         <a href="#" class="Truncate-text Truncate-text--expandable"> This is the text. JavaScript Python CSS HTML C/C++ Angular React MongoDB SQL Django Bootstrap Tailswind NextJs Typescript Java ExpressJs VueJs Laravel </a>
      </div>
   </div>
</body>
</html>

Beispiel

In diesem Beispiel haben wir abgeschnittenen Text hinzugefügt, der sich beim Hovern oder Fokussieren innerhalb des div-Elements erweitert.

<html>
<head>
   <link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" />
</head>
<body>
   <h1 style="margin: 10px"> Primer CSS Truncate Expand on hover or focus state </h1>
   <p style="margin: 15px"> Following we have different truncated text which expands on hovering. </p>
   <br>
   <div class="Box p-1" style="resize: horizontal; overflow: scroll; margin: 15px">
      <div class="Truncate">
         <div href="#" class="Truncate-text Truncate-text--expandable"> This is the text. JavaScript Python CSS HTML C/C++ Angular React MongoDB SQL Django </div>
         <div href="#" class="Truncate-text Truncate-text--expandable"> This is the text. JavaScript Python CSS HTML C/C++ Angular React MongoDB SQL Django </div>
         <div href="#" class="Truncate-text Truncate-text--expandable"> This is the text. JavaScript Python CSS HTML C/C++ Angular React MongoDB SQL Django </div>
         <div href="#" class="Truncate-text Truncate-text--expandable"> This is the text. JavaScript Python CSS HTML C/C++ Angular React MongoDB SQL Django </div>
      </div>
   </div>
</body>
</html>

Fazit

In diesem Artikel haben wir gelernt, wie man Text bei begrenztem Platz optisch ansprechend anzeigt. Wir verwenden die Truncation-Methode, die mit Primer CSS einfach durchgeführt werden kann. Darüber hinaus ermöglicht die Erstellung von skalierbarem, abgeschnittenem Text Benutzern den Zugriff auf Informationen bei Bedarf, ohne dass das Gesamtbild und die Atmosphäre der Website beeinträchtigt werden. Dadurch wird Ihre Website benutzerfreundlich und professionell.

Das obige ist der detaillierte Inhalt vonErste Schritte: CSS-Erweiterung beim Schweben oder Fokus abschneiden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Zusätzliche Farbeigenschaften, die von CSS3 bereitgestellt werdenNächster Artikel：Zusätzliche Farbeigenschaften, die von CSS3 bereitgestellt werden

In Verbindung stehende Artikel

Mehr sehen