Maison > Article > interface Web > Mise en route de l'extension CSS Truncate en survol ou en focus

Mise en route de l'extension CSS Truncate en survol ou en focus

WBOYavant: 2023-08-25 21:45:02936parcourir

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

L'affichage du texte est un facteur important dans la conception Web, qui affecte l'expérience utilisateur et la lisibilité du site Web. Si votre texte est affiché correctement de manière organisée, les utilisateurs le comprendront facilement et seront ainsi attirés par votre site Web. Parfois, cependant, le texte peut être trop long pour l’espace désigné sur une page Web. Pour afficher correctement ce texte, nous utilisons la méthode tronquée. Primer CSS fournit cette méthode dans laquelle vous pouvez non seulement tronquer le texte, mais également l'étendre avec des effets de survol ou de focus. Dans cet article, nous expliquerons comment cela fonctionne et les cours qui nous permettent de le faire.

Démarrez avec CSS

Primer CSS est un puissant framework CSS open source qui permet aux développeurs de créer des frontaux cohérents et professionnels pour les applications Web et les sites Web. Il est conçu par GitHub Design System. Il fournit un ensemble polyvalent de composants intégrés tels que la typographie, les boutons, les alertes, la troncature, les menus, la navigation, etc. qui sont faciles à utiliser et permettent de gagner beaucoup de temps. De plus, il fournit une documentation détaillée permettant aux débutants de se lancer à tout moment. Il dispose de classes prédéfinies pour tronquer le texte débordant dans les pages Web.

Avant d'utiliser une classe dans Primer CSS, nous devons l'installer depuis npm -

npm install --save @primer/css

Ou utilisez le lien CDN dans le code HTML -

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

Tronquer et développer en survol ou en état de mise au point

Pour développer le texte tronqué lors du survol ou de l'état de focus, Primer CSS dispose de classes intégrées. Ces cours sont les suivants -

Truncate-text - Utilisé pour tronquer n'importe quel texte
Truncate-text--expandable - Utilisé pour développer le texte tronqué en survol ou en focus.

Exemple

Dans cet exemple, nous utilisons la classe box prédéfinie pour convertir un élément div en une boîte redimensionnable. Ici, p-1 est un raccourci de classe pour ajouter 4px (0,25 rem) de remplissage de tous les côtés de la boîte.

Ensuite, nous avons l'attribut style pour ajouter le style souhaité à la boîte. Nous définissons la valeur de l'attribut resize sur horizontal afin que l'utilisateur puisse redimensionner la boîte horizontalement simplement en la faisant glisser depuis le coin droit. Pour ajouter une barre de défilement horizontale à un élément, nous utilisons l'attribut « overflow:scroll ». L'utilisation de barres de défilement horizontales permettra aux utilisateurs de voir le contenu caché lors du défilement du texte horizontalement.

Ensuite, nous créons un élément qui contient une balise d'ancrage qui sera tronquée pour tenir à l'intérieur de la boîte. Truncate-text est une classe définie pour tronquer le texte à l'intérieur d'une balise d'ancrage, tandis que la classe Truncate-text--expandable est intégrée pour permettre aux utilisateurs de développer chaque fois qu'elle est survolée ou focalisée sur un texte tronqué.

<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>

Exemple

Dans cet exemple, nous avons ajouté un texte tronqué qui se développe lors du survol ou du focus à l'intérieur de l'élément div.

<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>

Conclusion

Dans cet article, nous avons appris comment afficher correctement le texte de manière visuellement attrayante lorsque l'espace est limité. Nous utilisons la méthode de troncature, qui peut être facilement réalisée à l'aide de Primer CSS. De plus, la création d'un texte tronqué extensible permettra aux utilisateurs d'accéder aux informations en cas de besoin sans affecter l'apparence générale du site Web. Cela rend votre site Web convivial et professionnel.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Propriétés de couleur supplémentaires fournies par CSS3Article suivant：Propriétés de couleur supplémentaires fournies par CSS3

Articles Liés

Voir plus