2017-06-29 96 views
0

我已經在很多不同的論壇上搜索了幾個小時,但似乎沒有人能夠得到我需要的答案。如何在表格單元格中垂直對齊我的文本?這樣的:但是,如果沒有空格如何在表格單元格中垂直對齊我的文本?

V

Ë

ř

Ť

Ç

大號

這裏是我的代碼:

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

我已經嘗試文本方向,textdirection等

我迷路了,有人可以幫忙嗎?

回答

0

你可以用在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>

+0

非常好,謝謝!偉大的幫助:) –

相關問題