如何在不扭曲单元格大小的情况下旋转 HTML 表格中的文本？

使用 CSS 旋转文本并调整 HTML 表格中的单元格大小

尝试旋转表格单元格中的文本时，还必须考虑这一点，这一点很重要对细胞大小的影响。如提供的示例所示，当使用 CSS 变换来旋转文本而不调整单元格大小时，结果可能会失真。

要解决此问题，需要调整表格和单元格样式。通过设置表格标题的vertical-align：bottom和text-align：center，旋转后文本可以正确定位。

特别是对于Chrome，有必要将旋转后的文本包裹在中;元素。这可以确保文本的方向也发生改变，从而防止旋转后出现水平文本。随后使用 -ms-writing-mode：tb-rl、-webkit-writing-mode：vertical-rl、writing-mode：vertical-rl、transform：rotate(180deg) 和white-space：nowrap 设置样式.

示例代码

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

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

通过实施这些样式调整，可以将文本旋转 90 度，同时保持适当的单元格大小和格式。

以上是如何在不扭曲单元格大小的情况下旋转 HTML 表格中的文本？的详细内容。更多信息请关注PHP中文网其他相关文章！