Maison >interface Web >tutoriel HTML >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:03560parcourir
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
| . 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 lignesPour mieux comprendre comment éviter les sauts de mots dans les tableaux HTML, regardons l'exemple suivant. ExempleDans 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. ExempleJetons 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!