Comment empêcher les mots d'un tableau HTML de se diviser en lignes ?-tutoriel HTML-php.cn

Comment empêcher les mots dun tableau HTML de se diviser en lignes ?

Lorsque vous devez couper une ligne, vous pouvez utiliser la propriété word-break en CSS pour modifier le saut de ligne. Les sauts de ligne de texte n'apparaissent généralement qu'à des positions spécifiques, par exemple après un espace ou un trait d'union. Voici la syntaxe de la césure

word-break: normal|break-all|keep-all|break-word|initial|inherit;

Copier après la connexion

Plongeons dans cet article pour mieux comprendre comment éviter les sauts de mots dans les tableaux HTML. Avant cela, jetons un coup d'œil rapide au tableau HTML.

Tableau HTML

Les concepteurs Web peuvent utiliser des tableaux HTML pour organiser des informations telles que du texte, des images, des liens et d'autres tableaux en lignes et colonnes de cellules.

La balise

est utilisée pour générer des tableaux HTML. Les lignes du tableau sont créées à l'aide de la balise , tandis que les cellules de données sont créées à l'aide de la balise

. Par défaut, les éléments normaux et alignés à gauche sont placés sous

Empêcher les mots des tableaux HTML d'être divisés en différentes lignes

Pour mieux comprendre comment éviter les sauts de mots dans les tableaux HTML, regardons l'exemple suivant.

Exemple

Dans l'exemple ci-dessous, nous utilisons word-break: keep-all pour empêcher les mots de se diviser en différentes lignes.

<!DOCTYPE html>
<html>
   <body>
   <style>
      table {
         width:100px;
         border:1px solid black;
      }
      th, td {
         word-break:keep-all;
         border:1px solid black;
      }
   </style>
   <table cellspacing="0">
      <thead>
      <tr>
         <th style="display:none">ID</th>
         <th>SNO.</th>
         <th>Vehicle</th>
      </tr>
      </thead>
      <tbody>
         <tr>
            <td>1</td>
            <td>Verna</td>
            <td>Break Failure, BreakPads Problem</td>
         </tr>
      </tbody>
   </table>
   </body>
</html>

Copier après la connexion

Lorsque vous exécutez le script, il génère une sortie qui inclut un tableau rempli de données et utilise « word-break:keep-all » pour empêcher la césure d'apparaître sur la page Web.

Exemple

Jetons un coup d'œil à l'exemple ci-dessous dans lequel nous créons une page Web simple en utilisant la propriété whitespace avec la valeur « aucun saut de ligne ».

<!DOCTYPE html>
<html>
   <body style="background-color:#EAFAF1">
      <style>
         table.violetTable td,
         table.violetTable th {
            white-space: nowrap;
            border: 2px solid #5B2C6F ;
            padding: 4px 3px;
            text-align: left;
         }
      </style>
      <table class="violetTable">
         <tr>
         <td>Welcome to TutorialsPoint</td>
         </tr>
      </table>
   </body>
</html>

Copier après la connexion

Lorsque vous exécutez le script ci-dessus, une fenêtre de sortie apparaîtra affichant le texte des données tabulaires ; elle s'agrandira à mesure que le texte dans le code s'allongera, mais elle ne brisera pas les mots.

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!

Étiquettes associées：

防止 html表格 branche de mot

source：tutorialspoint.com

Article précédent：Comment définir le nombre de lignes visibles d’une zone de texte en HTML ? Article suivant：Comment appliquer une fonction à deux valeurs d'un tableau simultanément de droite à gauche ?

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur