如何在 table 单元格内垂直对齐文本？

Question

我已经在许多不同的论坛上搜索了几个小时的网络，但似乎没有人提供我需要的答案。如何在 table 单元格中垂直对齐文本？像这样：但没有空格

V

E

R

T

我

C

一个

L

这是我的代码：

.VerticalText {
    -ms-writing-mode: tb-lr;
    -webkit-writing-mode: vertical-lr;
    -moz-writing-mode: vertical-lr;
    }

<table width="98%" border="1" style="">
      <tbody>
        <tr>
          <table width="98%" border="1" style="">
      <tbody>
        <tr>
          <td rowspan="2">TEXT</td>
          <td rowspan="2">TEXT</td>
          <td colspan="7" align="center">TEXT</td>
          <td rowspan="2">TEXT</td>
        </tr>
        <tr>
          <td class="VerticalText">TEXT</td>
          <td>VERTICAL TEXT</td>
          <td>VERTICAL TEXT</td>
          <td>VERTICAL TEXT</td>
          <td>VERTICAL TEXT</td>
          <td>VERTICAL TEXT</td>
          <td>VERTICAL TEXT</td>
        </tr>
      </tbody>
    </table>

我试过文本方向、文本方向等

我迷路了，有人可以帮忙吗？

Answer 1

您可以将文本包裹在 span 中，使其成为一个块元素并给它一个非常小的 width（这样只有一个字母适合那里）以及 word-break: break-all;，所以这些词实际上分成了单个字母。（我在下面的示例中将更改后的 .VerticalText class 分配给了 span 元素）

.VerticalText {
  display: block;
  width: 0.9em;
  word-break: break-all;
}

<table width="98%" border="1" style="">
  <tbody>
    <tr>
      <table width="98%" border="1" style="">
        <tbody>
          <tr>
            <td rowspan="2">TEXT</td>
            <td rowspan="2">TEXT</td>
            <td colspan="7" align="center">TEXT</td>
            <td rowspan="2">TEXT</td>
          </tr>
          <tr>
            <td>TEXT</td>
            <td><span class="VerticalText">VERTICAL TEXT</span></td>
            <td><span class="VerticalText">VERTICAL TEXT</span></td>
            <td><span class="VerticalText">VERTICAL TEXT</span></td>
            <td><span class="VerticalText">VERTICAL TEXT</span></td>
            <td><span class="VerticalText">VERTICAL TEXT</span></td>
            <td><span class="VerticalText">VERTICAL TEXT</span></td>
          </tr>
        </tbody>
      </table>

如何在 table 单元格内垂直对齐文本？

How do I align my text vertically within a table cell?

html

css

vertical-text