Ajustar espaço entre o texto ou palavras em html

Question 1

Eu tenho um problema é como ajustar espaço entre o texto ou palavras em html. Eu quero o meu resultado 2 "dois pontos" alinhamento pode ajustar a mesma linha.

Abaixo está o meu código de exemplo:

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

Agora o meu resultado de alinhamento não pode ser o mesmo como:

Eu quero o resultado esperado é o mesmo, como abaixo:

Eu tenho tente usar <p> para substituir <span> ajustar o alinhamento, mas o "dois pontos" vai quebrar. Espero que alguém possa me orientar sobre como resolver este problema. Obrigado.

Question 2

Como o cólon é para separação visual, em vez de ter qualquer significado, que eu consideraria inseri-lo em um pseudo-elemento, ao invés do que realmente em HTML.

Este fragmento coloca os dois pontos antes do seguinte td que garante os dois pontos estão alinhados.

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

Eu tive um problema semelhante e a única "hacky" o jeito que eu achei é esse:
"Coloque o seu texto e o de separação (: neste caso) em um invólucro (como <div>) e alinhá-los.

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

Além disso, você não precisa <br> entre as linhas da tabela (<tr>s).

Question 4

Aqui eu tenho atualizado o código de exemplo colocar o : em 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

A maneira mais fácil de fazer isso é colocando o dois pontos no início do o 'texto', em vez do fim do '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>

Se você precisa omitir quando o 'texto' está vazia, você pode dar saída a dois pontos como um td::before usando 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

Se a sua sobre uma única palavra seguido de um :, text-align-last:justify; pode fazer o trabalho

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 o cólon é para separação visual, em vez de ter qualquer significado, que eu consideraria inseri-lo em um pseudo-elemento, ao invés do que realmente em HTML.

Este fragmento coloca os dois pontos antes do seguinte td que garante os dois pontos estão alinhados.

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

Eu tive um problema semelhante e a única "hacky" o jeito que eu achei é esse:
"Coloque o seu texto e o de separação (: neste caso) em um invólucro (como <div>) e alinhá-los.

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

Além disso, você não precisa <br> entre as linhas da tabela (<tr>s).

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

Aqui eu tenho atualizado o código de exemplo colocar o : em 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

A maneira mais fácil de fazer isso é colocando o dois pontos no início do o 'texto', em vez do fim do '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>

Se você precisa omitir quando o 'texto' está vazia, você pode dar saída a dois pontos como um td::before usando 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

Se a sua sobre uma única palavra seguido de um :, text-align-last:justify; pode fazer o trabalho

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 espaço entre o texto ou palavras em html

Pergunta

Melhor resposta

Em outros idiomas

Esta página está em outros idiomas

Popular nesta categoria

Perguntas populares nesta categoria