Question

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    

<div class="row">                  
    <table height="200"  class="table table-bordered table-striped table-highlight" >
        <tbody>
            <tr height="20">
                <td rowspan="3" width="4%" style="vertical-align: middle;"><p style="transform: rotate(270deg);white-space: nowrap;">1.I have here some long title</p></td>
                <td colspan="6" rowspan="3" width="384" >Here i have some text</td>
            </tr>
            <tr height="20">
            </tr>
            <tr height="20">
            </tr>
        </tbody>
    </table>
</div>


</body>
</html>

问题是我想要一个垂直文本，我使用 transform：rotate（270deg），但它使 <td> 的宽度不起作用。我想要一个小的。像：

Look here i have a picture

Answer 1

使用writing-mode，然后将文字旋转180度。

写入模式CSS属性定义文本行是水平放置还是垂直放置，以及块进展的方向。

MDN

＆＃13;

p {
  white-space: nowrap;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <table height="200" class="table table-bordered table-striped table-highlight">
    <tbody>
      <tr height="20">
        <td rowspan="3">
          <p>1.I have here some long title</p>
        </td>
        <td colspan="6" rowspan="3" width="384">Here i have some text</td>
      </tr>
      <tr height="20">
      </tr>
      <tr height="20">
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

Answer 2

＆＃13;

p {
  word-break: break-all;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    

<div class="row">                  
    <table height="200"  class="table table-bordered table-striped table-highlight" >
        <tbody>
            <tr height="20">
                <td rowspan="3" width="4%" style="vertical-align: middle;padding: 2rem;"><p>1.I have here some long title</p></td>
                <td colspan="6" rowspan="3" width="384" >Here i have some text</td>
            </tr>
            <tr height="20">
            </tr>
            <tr height="20">
            </tr>
        </tbody>
    </table>
</div>


</body>
</html>

＆＃13;

Answer 3

//截图如下

我在这里有一些很长的头衔。

这里我有一些文字这里我有一些文字

<tr>
<td style="vertical-align: middle;" rowspan="3" >
<p style="transform: rotate(270deg);"><span style="word-wrap: break-word;  white-space: nowrap; color: red;">1.I have here some long title</span></p>
</td>
<td colspan="6" rowspan="3" width="384"><p style="max-width:40px;">Here i have some text. Here I have some text</p></td>
</tr>

<tr>
<td style="vertical-align: middle;" rowspan="3">
<p style="transform: rotate(270deg);"><span style="word-wrap: break-word;  white-space: nowrap; color: red;">1.I have here some long title</span></p>
</td>
<td colspan="6" rowspan="3" width="384"><p style="max-width:40px;">Here i have some text. Here I have some text</p></td>
</tr>
</tbody>
</table>`enter code here`
</div>[![screenshot below][1]][1]


  [1]: https://i.stack.imgur.com/6lfdT.png

Html表td宽度由垂直文本？

3 个答案: