在任何表格单元格中垂直和逆时针显示文本

Posted 2023-03-06

【中文标题】在任何表格单元格中垂直和逆时针显示文本

【英文标题】：Show text vertically and counter-clockwise in any table cells

【发布时间】：2019-10-16 05:27:32

【问题描述】：

我有以下 CSS 和表格，其中 choice 3 和 choice 4 垂直显示但顺时针。我想垂直和逆时针显示choice 3 和choice 4。我无法根据需要找到 text-orientation 的样式值。

请注意，文本choice 3 和choice 4 只是示例，实际文本可能会很长。我正在寻找一种可以应用于表格中任何单元格的解决方案（如果单元格的空间很宽，最好将文本水平居中）。

.rotate 
  writing-mode: vertical-rl;
  text-orientation: mixed;

<table>
  <tr>
    <td></td>
    <td>choice 1</td>
    <td>choice 2</td>
    <td>total</td>
  </tr>
  <tr>
    <td>
      <div class="rotate">choice 3</div>
    </td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>
      <div class="rotate">choice 4</div>
    </td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>total</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

更新 这是我真正的桌子。

这是测试图片display: flex

【参考方案1】：

你可以加transform: rotate(180deg);

速记

Internet Explorer 支持与早期版本不同的值 源自 SVG 的规范。

Source

不包括vertical-rl，因此这在 Internet Explorer 中无法正常工作

---

.rotate 
  writing-mode: vertical-rl;
  transform: rotate(180deg);

<table>
  <tr>
    <td></td>
    <td>choice 1</td>
    <td>choice 2</td>
    <td>total</td>
  </tr>
  <tr>
    <td>
      <div class="rotate">choice 3</div>
    </td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>
      <div class="rotate">choice 4</div>
    </td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>total</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

【讨论】：

感谢您的参与！我需要跨浏览器（包括 IE 10）的解决方案。 writing-mode: vertical-rl 不是必需的，只要该解决方案可以跨浏览器运行即可。再次感谢！

因为您可能需要知道单词/元素的宽度，

实际文本的大小是不可预测的。计算它的宽度会使事情变得复杂。谢谢！

【参考方案2】：

另一种可能的解决方案是为<td> 和<div> 设置类，这样您就可以提供边距并提供支持所有浏览器的转换，如下所示：

div.rotate
  transform: rotate(-90deg);
 -webkit-transform: rotate(-90deg); /* Safari/Chrome */
 -moz-transform: rotate(-90deg); /* Firefox */
 -o-transform: rotate(-90deg); /* Opera */
 -ms-transform: rotate(-90deg); 


td.rotate
  height: 60px;
  line-height: 14px;
  padding-bottom: 20px;
  text-align: inherit;

<table>
  <tr>
    <td></td>
    <td colspan="1">choice 1</td>
    <td colspan="1">choice 2</td>
    <td>total</td>
  </tr>
  <tr>
    <td class="rotate" colspan="1">
      <div class="rotate">choice 3</div>
    </td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td class="rotate" colspan="1">
      <div class="rotate">choice 4</div>
    </td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>total</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

您可以在这里查看更多信息：https://www.broculos.net/2013/12/vertical-text-for-table-headers-with-css.html

【讨论】：

感谢您的信息！ td.rotate 是否必须具有 height 属性？就我而言，文本的大小是不可预测的。

你可以设置height:100%如果你的文本是不可预测的，它会自动将高度设置为任何文本高度，或者你可以给padding-bottom: 40px 或任何数量的像素而不是高度，这也可能在您的多个 <td> 之间创建自动空格

当我将高度设置为 100% 时，垂直文本会延伸到其他单元格中。你可以试试长文本。

它不工作。我用两张图片更新了我的帖子。