Ajustar espacio entre texto o palabras en html

Question 1

Tengo un problema es cómo ajustar espacio entre texto o palabras en html. Quiero que mi resultado 2 "colon" alineación puede ajustar la misma línea.

A continuación es mi código de ejemplo:

<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>

Ahora mi resultado de la alineación no puede ser el mismo como:

Quiero que el resultado esperado es el mismo, como a continuación:

He de intentar utilizar <p> para reemplazar <span> ajustar la alineación, pero el "Colon" se romperá. Espero que alguien me puede orientar sobre cómo solucionar este problema. Gracias.

Question 2

Como el de colon es para la separación visual en lugar de tener un significado, me gustaría considerar la posibilidad de insertarlo en un pseudo elemento más que, en realidad, en el HTML.

Este fragmento pone el colon en justo antes de la siguiente td que asegura que los dos puntos están alineados.

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

He tenido un problema similar y la única "chapucero" de manera que he encontrado es este:
"Pon tu texto y el separador (: en este caso) en un contenedor (como <div>) y alinearlo.

.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>

También, usted no necesita <br> entre las filas de tabla (<tr>s).

Question 4

Aquí he actualizado el código de ejemplo poner el : en segundo 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

La forma más fácil de conseguirlo es poner los dos puntos en el comienzo de el "texto", en lugar de la final de la 'título'.

/* 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 usted necesita para omitirlo cuando el 'texto' está vacío, se puede extraer el colon como un td::before el uso 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 se trata de una sola palabra seguida de un :, text-align-last:justify; puede hacer el trabajo

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

Como el de colon es para la separación visual en lugar de tener un significado, me gustaría considerar la posibilidad de insertarlo en un pseudo elemento más que, en realidad, en el HTML.

Este fragmento pone el colon en justo antes de la siguiente td que asegura que los dos puntos están alineados.

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

He tenido un problema similar y la única "chapucero" de manera que he encontrado es este:
"Pon tu texto y el separador (: en este caso) en un contenedor (como <div>) y alinearlo.

.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>

También, usted no necesita <br> entre las filas de tabla (<tr>s).

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

Aquí he actualizado el código de ejemplo poner el : en segundo 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

La forma más fácil de conseguirlo es poner los dos puntos en el comienzo de el "texto", en lugar de la final de la 'título'.

/* 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 usted necesita para omitirlo cuando el 'texto' está vacío, se puede extraer el colon como un td::before el uso 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 se trata de una sola palabra seguida de un :, text-align-last:justify; puede hacer el trabajo

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>

Ajustar espacio entre texto o palabras en html

Pregunta

Mejor respuesta

En otros idiomas

Esta página está en otros idiomas

Popular en esta categoría

Las preguntas más habituales en esta categoría