Question

我试图在div中实现roational文本，但现在能够做到。面临的问题

旋转文本应该是颠倒的，就像文本应该从底部开始，尝试使用-90实现但是它会向上并越过div。
无论文本是什么，都应该在div中（目前因为它是绝对的，它越过父div并且没有响应）。
文字的高度应始终为父高的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

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

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 2

这是我从你的问题中理解的。如果它不是你想要的。请评论，以便我可以对其进行编辑。

编辑

添加了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>

Answer 3

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

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

3 个答案: