Настройка пробелов между текстом или словами в html

Question 1

У меня проблема в том, как настроить пробелы между текстом или словами в html. Я хочу, чтобы в моем результате выравнивание 2 "двоеточия" могло регулировать одну и ту же линию.

Ниже приведен мой пример кода:

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

Теперь мой результат выравнивания не может быть таким же, как:

Я хочу, чтобы ожидаемый результат был таким же, как показано ниже:

Я попытался использовать <p> для замены <span> отрегулируйте выравнивание, но "двоеточие" сломается. Надеюсь, кто-нибудь сможет подсказать мне, как решить эту проблему. Спасибо.

Question 2

Поскольку двоеточие предназначено для визуального разделения, а не имеет какого-либо значения, я бы подумал о том, чтобы вставить его в псевдоэлемент, а не на самом деле в HTML.

Этот фрагмент помещает двоеточие непосредственно перед следующим td, что гарантирует выравнивание двоеточий.

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

У меня была похожая проблема, и единственный "хакерский" способ, который я нашел, - это:
"Поместите свой текст и разделитель (: в данном случае) в обертке (например <div>) и выровняйте их.

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

Кроме того, вам не нужно <br> между строками вашей таблицы (<tr>s).

Question 4

Здесь я обновил ваш пример кода, поместил : во втором тд

<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

Самый простой способ сделать это-поставить двоеточие в начале "текста", а не в конце "заголовка".

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

Если вам нужно опустить его, когда "текст" пуст, вы можете вывести двоеточие как td::before использование 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

Если речь идет об одном слове, за которым следует :, text-align-last:justify; может выполнить эту работу

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

Поскольку двоеточие предназначено для визуального разделения, а не имеет какого-либо значения, я бы подумал о том, чтобы вставить его в псевдоэлемент, а не на самом деле в HTML.

Этот фрагмент помещает двоеточие непосредственно перед следующим td, что гарантирует выравнивание двоеточий.

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

У меня была похожая проблема, и единственный "хакерский" способ, который я нашел, - это:
"Поместите свой текст и разделитель (: в данном случае) в обертке (например <div>) и выровняйте их.

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

Кроме того, вам не нужно <br> между строками вашей таблицы (<tr>s).

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

Здесь я обновил ваш пример кода, поместил : во втором тд

<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

Самый простой способ сделать это-поставить двоеточие в начале "текста", а не в конце "заголовка".

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

Если вам нужно опустить его, когда "текст" пуст, вы можете вывести двоеточие как td::before использование 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

Если речь идет об одном слове, за которым следует :, text-align-last:justify; может выполнить эту работу

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>

Настройка пробелов между текстом или словами в html

Вопрос

Лучший ответ

На других языках

Эта страница на других языках

Популярное в этой категории

Популярные вопросы в этой категории