Primer CSS tronque la largeur maximale personnalisée-tutoriel CSS-php.cn

Primer CSS tronque la largeur maximale personnalisée

WBOY

Libérer： 2023-08-29 16:41:02

avant

674 Les gens l'ont consulté

底漆 CSS 截断自定义最大宽度

Dans les projets de développement Web, les développeurs rencontreront des situations où le texte doit être affiché dans un espace spécifié pour diverses raisons telles que les besoins des clients, l'apparence générale, les ressources limitées, etc. L'attribut truncate est une propriété CSS efficace La fonction peut résoudre ce problème.

Il permet aux développeurs d'afficher du texte sur une seule ligne et de tronquer le texte qui déborde avec des points de suspension. Toutefois, selon les situations, il peut être nécessaire de personnaliser la largeur maximale du texte tronqué. Dans cet article, nous verrons comment personnaliser la largeur maximale à l'aide de Primer CSS, un framework CSS open source populaire conçu par GitHub Design Systems.

Que signifie la troncature ?

Dans la conception Web, truncate est l'une des valeurs de la propriété text-overflow de CSS. Lorsque nous travaillons avec du texte, nous rencontrons souvent des situations dans lesquelles le conteneur n'est pas assez grand pour contenir le texte. Ce type de texte est appelé texte de débordement. Cela nous permet d'afficher une ligne de texte puis de tronquer le reste avec des points de suspension.

En CSS, pour utiliser "tronquer", vous devez effectuer les étapes suivantes -

Définissez l'attribut "espace blanc" sur nowrap
Définissez la propriété overflow sur hide
Définissez l'attribut text-overflow sur ellipsis

Exemple

<html>
<head>
   <style>
      div {
         width: 77%;
         height: 30px;
         border: 1px solid black;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
      }      
   </style>
</head>  
<body> 
   <div> This is the text. Apple mango banana watermelon orange kiwi pomegranate muskmelon pineapple grapes papaya guava strawberries raspberry avocado pear. </div>
</body> 
</html>

Copier après la connexion

Pour éviter autant de lignes de code, vous pouvez utiliser Primer CSS à la place. Primer CSS a un composant de troncature intégré. Il a les mêmes classes prédéfinies.

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

npm install --save @primer/css

Copier après la connexion

Ou utilisez le lien CDN dans le code HTML -

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

Copier après la connexion

Personnalisez la largeur maximale du texte tronqué

Pour personnaliser la largeur maximale du texte tronqué, Primer CSS fournit des classes prédéfinies pour tronquer le texte débordant dans les sites Web.

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.

Nous utilisons ensuite des classes prédéfinies dans Primer CSS pour afficher différents textes tronqués avec différentes largeurs maximales.

<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 Custom Max Width </h1>
   <p style="margin: 10px"> Following we have different truncated text with customized maximum widths. </p>
   <br>
   <div class="Box p-1" style="resize: horizontal; overflow: scroll; margin: 10px">
      <div class="Truncate">
         <span class="Truncate-text Truncate-text--expandable" style="max-width: 460px;"> This is the text. Apple mango banana watermelon orange kiwi pomegranate muskmelon pineapple grapes papaya guava strawberries raspberry avocado pear. </span>
      </div>
      <br>
      <div class="Truncate">
         <span class="Truncate-text Truncate-text--expandable" style="max-width: 340px;"> This is the text. Apple mango banana watermelon orange kiwi pomegranate muskmelon pineapple grapes papaya guava strawberries raspberry avocado pear. </span>
      </div>
      <br>
      <div class="Truncate">
         <span class="Truncate-text Truncate-text--expandable" style="max-width: 280px;"> This is the text. Apple mango banana watermelon orange kiwi pomegranate muskmelon pineapple grapes papaya guava strawberries raspberry avocado pear. </span>
      </div>
      <br>
      <div class="Truncate">
         <span class="Truncate-text Truncate-text--expandable" style="max-width: 180px;"> This is the text. Apple mango banana watermelon orange kiwi pomegranate muskmelon pineapple grapes papaya guava strawberries raspberry avocado pear. </span>
      </div>
      <br>
      <div class="Truncate">
         <span class="Truncate-text Truncate-text--expandable" style="max-width: 80px;"> This is the text. Apple mango banana watermelon orange kiwi pomegranate muskmelon pineapple grapes papaya guava strawberries raspberry avocado pear. </span>
      </div>
   </div>
</body>
</html>

Copier après la connexion

Conclusion

La personnalisation de la largeur maximale du texte affiché en cas de débordement de contenu est une bonne pratique et peut aider les développeurs à contrôler l'affichage du texte dans un espace limité sur le site Web. En suivant les méthodes décrites dans cet article, vous pourrez créer un site Web visuellement attrayant. Nous pouvons également utiliser des méthodes de troncature dans la conception de cartes. Cela rend votre contenu plus lisible et convivial alors que vous devez afficher des titres longs, des titres, des descriptions de cartes, etc.,

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!