文本旋转:垂直的，没有任何绝对的，在div内

Question

我正试图在div内实现旋转文本，但现在能够做到这一点。面临的问题

1. 旋转的文本应该是颠倒的，就像文字应该从底部开始，试着用-90来实现，但它是向上的和跨越的div。
2. 无论文本是什么，它都应该在div内(目前因为它是绝对的，它正在跨越父div，并且没有响应)。
3. 文本的高度应始终是父级高度的100%。

努力做到这一点，但没有得到干净的解决方案。

.header{
width:100%;
height:30px;
background:gainsboro;
}

.footer{
width:100%;
height:30px;
background:gainsboro;
}

.floatsidebar {
  clear: none;
  overflow: hidden;
  z-index: 99999;
}
  
.sidebarmain {
  cursor: pointer;
  border: 1px solid grey;
  width: 30px;
  height: 99.5%;
  background: linear-gradient(to right, white, lightgrey)
}

.vertical-text {
  text-align: -webkit-match-parent;
  position: absolute;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transform-origin: left top 0;
  transform-origin: left top 0;
  margin-left: 30px;
  padding: 8px;
}

<div class="header">
header
</div>

<div class="floatsidebar " (click)="_toggleSidebar()">
  <div class="sidebarmain ui-widget-header">
    <div class="vertical-text">622 and 626 All Material Transporter (PC2269)</div>
  </div>
</div>

<div class="footer">
footer
</div>

​

Answer 1

您可以使用writing-mode: vertical-rl或writing-mode: vertical-lr。所有最新浏览器也支持此CSS属性。

Answer 2

您可以使用伪元素添加一些填充。

​

header,footer {
  background-color: lightgrey;
}

.vertical-text {
  display: inline-block;
  transform: rotate(-90deg);
}

.vertical-text:after { 
  content: ''; 
  padding: 45% 0;
  display: block; 
  position: relative;
  top: 0;
}

<header>
  header
</header>

<div class="vertical-text">
  some vertical text
</div>

<footer>
   footer
</footer>

​

下面是一种更好的方法(取自http://kizu.ru/en/fun/rotated-text/)，它使用包装跨度：

​

.header{
width:100%;
height:30px;
background:gainsboro;
}

.footer{
width:100%;
height:30px;
background:gainsboro;
}

.floatsidebar {
  clear: none;
  overflow: hidden;
  z-index: 99999;
}
  
.sidebarmain {
  cursor: pointer;
  border: 1px solid grey;
  width: 30px;
  height: 99.5%;
  background: linear-gradient(to right, white, lightgrey)
}

 .rotated-text {
     display: inline-block;
     overflow: hidden;

     width: 1.5em;
     line-height: 1.5;
 }
 
 .rotated-text__inner {
     display: inline-block;
     white-space: nowrap;

     transform: translate(0,100%) rotate(-90deg);
     transform-origin: 0 0;
 }
 
  .rotated-text__inner:after {
     content: "";
     float: left;
     margin-top: 100%;
 }

<div class="header">
header
</div>

<div class="floatsidebar " (click)="_toggleSidebar()">
  <div class="sidebarmain ui-widget-header">
     <span class="rotated-text">
         <span class="rotated-text__inner">
             622 and 626 All Material Transporter (PC2269)
         </span>
     </span>  
  </div>
</div>

<div class="footer">
footer
</div>

​

Answer 3

这就是我从你的问题中了解到的。如果这不是你想要的。请评论一下，这样我就可以编辑了。

编辑

添加jquery来计算侧栏的最小高度。

​

vertTop =  $('.vertical-text').width();
vertTop = vertTop + 60;

$(".sidebarmain").css('height', $('.vertical-text').width());
$('.vertical-text').css('top', vertTop);

.header {
  width: 100%;
  height: 30px;
  background: gainsboro;
}

.footer {
  width: 100%;
  height: 30px;
  background: gainsboro;
}

.floatsidebar {
  clear: none;
  overflow: hidden;
  z-index: 99999;
}

.sidebarmain {
  cursor: pointer;
  border: 1px solid grey;
  width: 30px;
  padding: 10px 0;
  background: linear-gradient(to right, white, lightgrey)
}

.vertical-text {
  text-align: -webkit-match-parent;
  position: absolute;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-transform-origin: left top 0;
  transform-origin: left top 0;
  padding: 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
  header
</div>

<div class="floatsidebar " (click)="_toggleSidebar()">
  <div class="sidebarmain ui-widget-header">
    <div class="vertical-text">622 and 626 All Material Transporter (PC2269)</div>
  </div>
</div>

<div class="footer">
  footer
</div>

​