如何在 HTML 中将文本向左旋转 90 度并相应调整单元格大小？

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

达到你想要的旋转效果的同时相应地调整单元格大小，请考虑使用 CSS 和 HTML 的组合。

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>

HTML 解决方案：

<code class="html"><table>
  <tr>
    <th><span>Rotated text by 90 deg.</span></th>
  </tr>
</table></code>

登录后复制

在此解决方案中：

• th { 垂直对齐：底部;文本对齐：居中； }: 在单元格内垂直和水平对齐旋转的文本。
• th span { ...writing-mode:vertical-rl; }: 将文本的书写模式设置为垂直，允许其垂直旋转。
• th span { transform:rotate(180deg); }: 将文本旋转 180 度以面向左侧。
• th span {white-space: nowrap; }: 防止文本换行，因此它可以全部放在一行上并相应地调整单元格大小。

注意：

此解决方案要求您将旋转的文本包装在 中元素。 元素仅对 Chrome 是必需的，因为它本身不支持更改

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