Ajuster l'espace entre le texte ou les mots en html

Question 1

J'ai un problème est de savoir comment ajuster les espaces entre le texte ou les mots en html. Je veux mon résultat 2 "colon" alignement pouvez ajuster la même ligne.

Ci-dessous mon code d'exemple:

<tr><td style="font-size:11px;">Name :</td></tr><br>
<tr><td style="font-size:11px;">Date &nbsp;<span style="word-spacing:80px;">:</span></td></tr>

Maintenant mon résultat de l'alignement ne peut pas être le même comme:

Je veux le résultat attendu est le même comme ci-dessous:

J'ai essayer d'utiliser <p> pour remplacer <span> ajuster l'alignement, mais le "Colon" se décomposent. J'espère que quelqu'un peut me guider sur la façon de résoudre ce problème. Merci.

Question 2

Comme le côlon est pour la séparation visuelle plutôt que d'avoir un sens je considère l'insérer dans un pseudo-élément plutôt que de réellement dans le code HTML.

Cet extrait met le côlon juste avant que la suivante td qui assure les deux-points sont alignés.

td:nth-child(2)::before {
  content: ':';
}

<table>
  <tr>
    <td style="font-size:11px;">Name </td>
    <td></td>
  </tr><br>
  <tr>
    <td style="font-size:11px;">Date</td>
    <td></td>
  </tr>
</table>

Question 3

J'ai eu un problème similaire et le seul "hacky" j'ai trouvé est:
"Mettez votre texte et le séparateur (: dans ce cas-ci) dans une enveloppe (comme <div>) et de les aligner.

.cell {
  display: flex;
  justify-content: space-between;
  width: 50px; /* just to see. you can use another value depending on your table styles */
}

<tr>
  <td style="font-size:11px;">
    <div class="cell">Name <span>:</span></div>
  </td>
</tr>
<tr>
  <td style="font-size:11px;">
    <div class="cell">Date <span>:</span></div>
  </td>
</tr>

Aussi, vous n'avez pas besoin <br> entre les lignes de votre tableau (<tr>s).

Question 4

Ici, j'ai mis à jour votre exemple de code mis l' : dans le deuxième td

<body>
    <table>
      <tr>
        <td>Full Name</td>
        <td>: Abc def</td>
      </tr>
      <tr>
        <td>Date</td>
        <td>: 24-11-2021</td>
      </tr>
    </table>
  </body>

Question 5

Le moyen le plus facile à accomplir est de mettre la virgule au début de le "texte", au lieu de la fin de la "titre".

/* Not relevant */

th {
  font-weight: normal;
  text-align: left;
}

<table>
  <tr>
    <th>Name</th>
    <td> : John Doe</td>
  </tr>
  <tr>
    <th>Date</th>
    <td> : Nov. 24, 2021</td>
  </tr>
  <tr>
    <th>Very long title</th>
    <td> : Data</td>
  </tr>
</table>

Si vous avez besoin de l'omettre quand le "texte" est vide, vous pouvez la sortie du côlon td::before à l'aide de CSS.

/* This is relevant */

td:not(:empty)::before {
  content: " : ";
}


/* Not relevant */

th {
  font-weight: normal;
  text-align: left;
}

<table>
  <tr>
    <th>Name</th>
    <td>John Doe</td>
  </tr>
  <tr>
    <th>Date</th>
    <td>Nov. 24, 2021</td>
  </tr>
  <tr>
    <th>Very long title</th>
    <td></td>
  </tr>
</table>

Question 6

Si ses propos d'un seul mot est suivi d'un :, text-align-last:justify; peut faire la job

td.adjust {
  text-align-last: justify;
  padding-inline-end:0.25rem;
}

<table>
  <tr>
    <td class="adjust">Name :</td>
    <td>Name </td>
  </tr><br>
  <tr>
    <td class="adjust">Date :</td>
    <td>Today</td>
  </tr>
</table>

A Haworth · Answer 1 · 2021-11-24T06:22:45

Comme le côlon est pour la séparation visuelle plutôt que d'avoir un sens je considère l'insérer dans un pseudo-élément plutôt que de réellement dans le code HTML.

Cet extrait met le côlon juste avant que la suivante td qui assure les deux-points sont alignés.

td:nth-child(2)::before {
  content: ':';
}

<table>
  <tr>
    <td style="font-size:11px;">Name </td>
    <td></td>
  </tr><br>
  <tr>
    <td style="font-size:11px;">Date</td>
    <td></td>
  </tr>
</table>

Shahriar · Answer 2 · 2021-11-24T08:05:14

J'ai eu un problème similaire et le seul "hacky" j'ai trouvé est:
"Mettez votre texte et le séparateur (: dans ce cas-ci) dans une enveloppe (comme <div>) et de les aligner.

.cell {
  display: flex;
  justify-content: space-between;
  width: 50px; /* just to see. you can use another value depending on your table styles */
}

<tr>
  <td style="font-size:11px;">
    <div class="cell">Name <span>:</span></div>
  </td>
</tr>
<tr>
  <td style="font-size:11px;">
    <div class="cell">Date <span>:</span></div>
  </td>
</tr>

Aussi, vous n'avez pas besoin <br> entre les lignes de votre tableau (<tr>s).

Janki Gandhi · Answer 3 · 2021-11-24T05:07:41

Ici, j'ai mis à jour votre exemple de code mis l' : dans le deuxième td

<body>
    <table>
      <tr>
        <td>Full Name</td>
        <td>: Abc def</td>
      </tr>
      <tr>
        <td>Date</td>
        <td>: 24-11-2021</td>
      </tr>
    </table>
  </body>

LSE · Answer 4 · 2021-11-24T04:57:36

Le moyen le plus facile à accomplir est de mettre la virgule au début de le "texte", au lieu de la fin de la "titre".

/* Not relevant */

th {
  font-weight: normal;
  text-align: left;
}

<table>
  <tr>
    <th>Name</th>
    <td> : John Doe</td>
  </tr>
  <tr>
    <th>Date</th>
    <td> : Nov. 24, 2021</td>
  </tr>
  <tr>
    <th>Very long title</th>
    <td> : Data</td>
  </tr>
</table>

Si vous avez besoin de l'omettre quand le "texte" est vide, vous pouvez la sortie du côlon td::before à l'aide de CSS.

/* This is relevant */

td:not(:empty)::before {
  content: " : ";
}


/* Not relevant */

th {
  font-weight: normal;
  text-align: left;
}

<table>
  <tr>
    <th>Name</th>
    <td>John Doe</td>
  </tr>
  <tr>
    <th>Date</th>
    <td>Nov. 24, 2021</td>
  </tr>
  <tr>
    <th>Very long title</th>
    <td></td>
  </tr>
</table>

G-Cyrillus · Answer 5 · 2021-11-24T08:11:27

Si ses propos d'un seul mot est suivi d'un :, text-align-last:justify; peut faire la job

td.adjust {
  text-align-last: justify;
  padding-inline-end:0.25rem;
}

<table>
  <tr>
    <td class="adjust">Name :</td>
    <td>Name </td>
  </tr><br>
  <tr>
    <td class="adjust">Date :</td>
    <td>Today</td>
  </tr>
</table>

Ajuster l'espace entre le texte ou les mots en html

La question

La meilleure réponse

Dans d'autres langues

Cette page est dans d'autres langues

Populaires dans cette catégorie

Questions populaires dans cette catégorie