Comment puis-je empêcher des mots longs de briser mon div ?-tutoriel CSS-php.cn

Comment puis-je empêcher des mots longs de briser mon div ?

WBOY

Libérer： 2023-08-30 16:29:06

avant

807 Les gens l'ont consulté

Comment puis-je empêcher des mots longs de briser mon div ?

Parfois, les développeurs doivent afficher des mots longs sur les pages Web. Par exemple, affichez des URL, des noms de fichiers longs, etc. Parfois, la longueur du mot est supérieure à la longueur du conteneur parent et le mot détruit le conteneur.

Par exemple, nous avons créé une carte pour afficher les détails du fichier et le nom du fichier était très long, ce qui pourrait casser la carte et cela semble toujours pire. Par conséquent, les développeurs doivent empêcher les mots longs de briser les éléments div en les encapsulant.

Avant de commencer la solution, comprenons le problème à travers un exemple.

Exemple 1 (div de décomposition de mots longs)

Dans l'exemple ci-dessous, nous avons créé un élément div et ajouté un élément "p" à l'intérieur de l'élément div. De plus, nous avons ajouté des mots longs au texte de l'élément « p ».

En CSS, nous définissons une taille fixe de l'élément div. Dans la sortie, l'utilisateur peut observer quand le mot rompt l'élément div et en déborde.

<html>
<head>
   <style>
      .container {
         width: 300px;
         border: 1px solid #ccc;
         padding: 10px;
         font-size: 1.5rem;
      }       
   </style>    
</head>
<body>
   <h2> Long words breaking the div in HTML5 </h2>
   <div class = "container">
      <p class = "long-word"> This is a longwordthatshouldnotbreakinsideadiv. </p>
   </div>
</body>
</html>

Copier après la connexion

Utilisez la propriété CSS Word-break pour casser les mots

Dans cette méthode, nous utiliserons la propriété CSS « word-break » pour empêcher les mots de casser l'élément div. L'attribut "word-break" nous permet de décider comment les mots doivent être brisés lorsqu'ils dépassent la largeur du conteneur.

Besoin de valeurs différentes pour passer le mot. La valeur "normale" coupe les mots uniquement aux points d'arrêt spécifiés (par exemple, espaces, tirets, etc.). La valeur "break-all" coupe le mot à chaque caractère qui déborde, et la valeur "keep-all" ne coupe jamais le mot. mot.

Ici, nous utiliserons la valeur « break-all » pour séparer le mot de n'importe quel caractère.

Grammaire

Les utilisateurs peuvent utiliser la propriété CSS « word-break » selon la syntaxe suivante pour empêcher les mots longs de casser les éléments div.

 word-break: break-all;

Copier après la connexion

Exemple 2 (empêcher les mots longs de briser le div)

Dans l'exemple ci-dessous, nous avons ajouté le mot long que nous avons ajouté dans le premier exemple à l'intérieur de l'élément div conteneur. En CSS, nous utilisons la propriété « word-break » et la valeur « break-all » pour empêcher les mots de casser les éléments div.

Dans la sortie, nous pouvons observer que le mot se sépare d'un caractère spécifique et que les caractères restants du mot sont affichés dans la ligne suivante.

<html>
<head>
   <style>
      .container {
         width: 300px;
         border: 1px solid #ccc;
         padding: 10px;
         font-size: 1.5rem;
      }
      .long-word {
         word-break: break-all;
      }
   </style>
</head>
<body>
   <h2> Preventing the long words breaking the div in HTML5
   </h2>
   <div class = "container">
      <p class = "long-word"> This is a longwordthatshouldnotbreakinsideadiv.</p>
   </div>
</body>
</html>

Copier après la connexion

Utiliser l'attribut Overflow-wrap

L'attribut "overflow-wrap" nous permet de décider comment le contenu de l'élément doit être renvoyé lorsqu'il déborde de l'élément parent. Nous pouvons utiliser la valeur "break-word" de l'attribut "overflow-wrap" pour empêcher les mots longs de casser l'élément div par retour à la ligne.

Grammaire

Les utilisateurs peuvent utiliser la propriété CSS « overflow-wrap » pour envelopper les mots longs selon la syntaxe suivante.

overflow-wrap: break-word;

Copier après la connexion

Exemple 3

Dans l'exemple ci-dessous, nous avons ajouté un mot très long comme texte de l'élément "p". Après cela, nous utilisons l'attribut "overflow-wrap" de l'élément parent pour envelopper le contenu débordé dans la ligne suivante en cassant les mots.

Dans le résultat, nous pouvons voir que le mot est interrompu au milieu et que les caractères restants sont affichés sur la ligne suivante.

<html>
<head>
   <style>
      .container {
         width: 300px;
         border: 1px solid #ccc;
         padding: 10px;
         overflow-wrap: break-word;
      }
   </style>
</head>
<body>
   <h3> Preventing the long words breaking the div in HTML5 using the overflow-wrap property
   </h3>
   <div class = "container">
      <p class = "long-word"> Thisisaverylongwordthatshouldnotbreakinsideadiv. </p>
   </div>
</body>
</html>

Copier après la connexion

Exemple 4 (définir l'attribut Overflow-wrap à l'aide de JavaScript)

Parfois, nous devons utiliser JavaScript pour empêcher les mots longs de briser le div. Par exemple, nous obtenons les données du produit de la base de données, si le nom du produit est très long, nous pouvons utiliser l'attribut "overflow-wrap" pour un produit spécifique pour envelopper le nom long du produit.

En JavaScript, nous pouvons accéder à l'élément HTML et utiliser la propriété "overflowWrap" de l'objet style pour empêcher les mots longs de casser l'élément div.

<html>
<head>
   <style>
      .container {
         width: 300px;
         border: 1px solid #ccc;
         padding: 10px;

      }
   </style>
</head>
<body>
   <h3> Preventing the long words breaking the div in HTML5 using the <i>overflow-wrap</i> property
   </h2>
   <div class = "container">
      <p class = "long-word"> Thisisaverylongwordthatshouldnotbreakinsideadiv. </p>
   </div>
   <script>
      let longWord = document.querySelector('.long-word');
      longWord.style.overflowWrap = 'break-word';
   </script>
</body>
</html>

Copier après la connexion

Les utilisateurs ont appris à utiliser différentes propriétés CSS pour empêcher les mots longs de casser les éléments div. Dans la première méthode, nous utilisons la propriété CSS « word-break » pour spécifier comment le navigateur doit casser les mots. Dans la deuxième approche, nous utilisons la propriété CSS "overflow-wrap" pour spécifier comment gérer le débordement du contenu de l'élément div.

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!