Maison > Article > interface Web > Comment empêcher les mots d’un tableau HTML de se diviser en lignes ?

Comment empêcher les mots d’un tableau HTML de se diviser en lignes ?

WBOYavant: 2023-09-16 22:45:03468parcourir

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;

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>

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>

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!

css html break table td tr word

Déclaration：

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

Article précédent：Comment définir le nombre de lignes visibles d’une zone de texte en HTML ?Article suivant：Comment définir le nombre de lignes visibles d’une zone de texte en HTML ?

Articles Liés

Voir plus