0

I've been scouring the web for hours now on many different forums, but no one seems to have the answers I need. How do I align my text vertically in a table cell? Like that: But without spaces

V

E

R

T

I

C

A

L

Here is my code:

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

I have tried text orientation, textdirection, etc.

I'm lost, can someone help?

4

1 回答 1

0

您可以将文本包装在 a 中span，使其成为一个块元素并给它一个非常小的width（这样只有一个字母适合其中），而且word-break: break-all;，所以单词实际上会分解成单个字母。（我在下面的示例中将更改后.VerticalText的类分配给了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>

于 2017-06-29T16:37:29.953 回答