Définir la limite de longueur du texte sur N lignes à l'aide de CSS-tutoriel CSS-php.cn

Définir la limite de longueur du texte sur N lignes à l'aide de CSS

王林

Libérer： 2023-08-27 13:29:08

avant

1328 Les gens l'ont consulté

使用 CSS 将文本长度限制设置为 N 行

Parfois, les développeurs doivent tronquer le texte en fonction de la taille des éléments HTML. Par exemple, la largeur de l'élément div est de 100 px, ce qui ne peut contenir que quelques caractères. Par conséquent, nous devons utiliser CSS pour tronquer le texte.

Cependant, nous pouvons utiliser JavaScript pour tronquer le texte, mais cela peut poser des problèmes. Par exemple, nous pouvons afficher 18 caractères en 100 pixels, mais parfois moins de caractères peuvent être affichés en raison de la capitalisation des caractères. Dans ce cas, si on affiche 18 caractères, cela risque de déborder.

Donc, utiliser CSS pour tronquer le texte est une meilleure idée.

Grammaire

Les utilisateurs peuvent définir la limite de texte à N lignes en utilisant CSS en utilisant la syntaxe suivante.

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

Copier après la connexion

Dans la syntaxe ci-dessus, nous définissons le débordement sur caché et « text-overflow : elipsis » pour tronquer le texte. La valeur de la propriété "-webkit-line-clamp" indique le nombre de lignes à afficher.

Exemple 1

Dans l'exemple ci-dessous, nous affichons une seule ligne de texte. Nous tronquerons l'autre texte. Nous définissons 300px comme largeur de l'élément div, masqué comme débordement, et points de suspension comme attribut text-overflow. De plus, nous utilisons l'attribut « espace blanc » et la valeur « no-wrap » pour afficher le texte uniquement sur une seule ligne.

<html>
<head>
   <style>
      div {
         height: auto;
         width: 300px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
         background-color: red;
         color: white;
         padding: 10px;
      }
   </style>
</head>
<body>
   <h2>Limiting the text length to 1 line using CSS</h2>
   <div>This is a div containing multiple lines of text. The text visibility is limited to 1 line only.</div>
</body>
</html>

Copier après la connexion

La traduction chinoise de

Exemple 2

est :

Exemple 2

Dans l'exemple ci-dessous, nous affichons N lignes de texte tronqué. Nous avons ajouté du texte à l'élément div comme dans le premier exemple. Après cela, nous avons utilisé la propriété CSS « webkit-line-clamp » pour définir le nombre de lignes au lieu d'utiliser la propriété CSS « white-space: no-wrap ».

Dans la sortie, l'utilisateur peut constater qu'il n'affiche que trois lignes de texte tronqué. L'utilisateur peut modifier le nombre de lignes et observer le résultat.

<html>
<head>
   <style>
      div {
         overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
         line-height: 20px;
         max-height: 100px;
         padding: 4px 10px;
         max-width: 400px;
         background-color: aqua;
         -webkit-line-clamp: 3;
         -webkit-box-orient: vertical;
      }
   </style>
</head>
<body>
   <h3>Limiting the text length to N line using CSS</h3>
   <div>Git is a popular version control system used to track changes in code or other files. It allows multiple
      developers to work on the same project simultaneously, without overwriting each other's changes. Git uses a
      distributed architecture, which means that each developer has their own local copy of the repository, and
      changes can be easily merged together.</div>
</body>
</html>

Copier après la connexion

La traduction chinoise de

Exemple 3

est :

Exemple 3

Dans l'exemple ci-dessous, nous démontrerons l'utilisation en temps réel de la troncature de texte à N lignes. Ici, nous avons créé un composant de carte en utilisant HTML et CSS. Nous avons ajouté une image sur le côté gauche de la carte et du texte à droite. De plus, la largeur de la carte est fixe.

Nous devons afficher le texte sur le côté droit de la carte sans laisser le texte déborder. Nous tronçons le texte à 4 lignes, ce qui est visible dans le résultat.

<html>
<head>
   <style>
      .card {
         background-color: grey;
         width: 400px;
         height: 80px;
         display: flex;
         border-radius: 12px;
         box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
         text-align: left;
         justify-content: center;
      }
      .img {
         width: 130px;
         height: 70px;
         margin-right: 30px;
         padding: 5px;
      }
      img {
         width: 100%;
         height: 100%;
      }
      .content {
         width: 450px;
         height: 70px;
         overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
         -webkit-line-clamp: 4;
         -webkit-box-orient: vertical;
      }
   </style>
</head>
<body>
   <h2>Limiting the text length to N line using CSS</h3>
   <div class = "card">
      <div class = "img">
         <img src = "https://img.freepik.com/free-photo/grunge-paint-background_1409-1337.jpg" alt = "img">
      </div>
      <div class = "content">
         This is an information about the image. Whatever text will fit to the div, it will be shown. If the text is
         more than the div, then it will be hidden and the text will be shown as ellipsis.
      </div>
   </div>
</body>
</html>

Copier après la connexion

Les utilisateurs ont appris à tronquer le texte en plusieurs lignes. Nous pouvons tronquer le texte en utilisant les propriétés CSS « overflow:hidden » et « text-overflow:elipsis ». De plus, nous devons utiliser "white-space: no-wrap" pour tronquer une seule ligne de texte, et la propriété CSS "webkit-line-clamp:lines" pour tronquer le texte en plusieurs lignes.

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!