如何将表格单元格中的文本向左旋转 90 度并根据文本长度调整单元格大小？

如何将文本向左旋转 90 度并根据 HTML 中的文本调整单元格大小

使用 CSS 转换将文本单元格向左旋转 90 度可以存在挑战，例如错位和格式混乱。为了解决这些问题，我们可以实现严格的 CSS 和 HTML 解决方案，根据文本长度动态调整单元格大小。

在 HTML 代码中，我们使用 。元素来包含我们要旋转的文本：

<code class="html"><table cellpadding="0" cellspacing="0" align="center">
    <tr>
        <td id="rotate"><span>10kg</span></td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
        <td>E</td>
    </tr>
    <tr>
        <td id="rotate"><span>20kg</span></td>
        <td>G</td>
        <td>H</td>
        <td>I</td>
        <td>J</td>
    </tr>
    <tr>
        <td id="rotate"><span>30kg</span></td>
        <td>L</td>
        <td>M</td>
        <td>N</td>
        <td>O</td>
    </tr>
</table></code>

接下来，我们应用 CSS 样式来旋转文本并相应地调整单元格大小：

<code class="css">th {
  vertical-align: bottom;
  text-align: center;
}

th span {
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}</code>

以下是它的工作原理:

• 第一个规则将单元格垂直对齐到底部，文本对齐到中心。
• 第一个跨度规则将垂直书写模式应用于文本，翻转180度，防止换行。

利用CSS书写模式的能力，我们可以根据文本的长度动态调整单元格大小，保证文本正确旋转而不影响桌子的布局。此方法对于列内文本长度变化较大的场景特别有用。

以上是如何将表格单元格中的文本向左旋转 90 度并根据文本长度调整单元格大小？的详细内容。更多信息请关注PHP中文网其他相关文章！