調整html中文本或單詞之間的空格-有解無憂

我有一個問題是如何調整 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>

現在我的結果對齊不能像：

調整html中文本或單詞之間的空格

我希望預期的結果如下所示：

調整html中文本或單詞之間的空格

我曾嘗試使用<p>替換<span>調整對齊方式，但“冒號”會崩潰。希望有人能指導我如何解決這個問題。謝謝。

uj5u.com熱心網友回復：

最簡單的方法是將冒號放在“文本”的開頭，而不是“標題”的結尾。

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

如果您需要在 'text' 為空時省略它，您可以將冒號輸出為td::beforeusing 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>

uj5u.com熱心網友回復：

在這里，我更新了您的示例代碼，將其:放入第二個 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>

uj5u.com熱心網友回復：

由于冒號是用于視覺分隔而不是具有任何意義，因此我會考慮將其插入偽元素中而不是實際插入 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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/364583.html

標籤：html css 字间距

上一篇：html中的音頻靜音和取消靜音按鈕

下一篇：有沒有辦法通過陣列移動div？