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.
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" />
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.
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>
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>
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!
Wie viele Menschen können Sie mit Douyin großziehen?
Drei wichtige Frameworks für die Android-Entwicklung
Windows kann zum Hinzufügen eines Druckers nicht geöffnet werden
Lösung für die Erlaubnis verweigert
Welche Datensicherungssoftware gibt es?
SP2-Patch
Windows kann die Lösung für das Zertifikat nicht finden
Offizielle OKEX-Website
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
