具有响应性的垂直文本

Question

我正在努力处理垂直文本

这是我的plunker

我要做的是制作一个垂直文字：

1. 如果短文本位于垂直文本的div内，那么它应该位于div的中间
2. 如果长文本出现在div中，它应该从页面底部开始，但它应该是响应的（例如，如果我最小化我的窗口底部文本不应该隐藏它将在div中上升）和{{1椭圆应该在垂直文本的最后一个大文本

我已经达到了1.但是第二个没有完全正常工作，没有响应能力，文本进入div并且不可见。

Answer 1

这可能对您有所帮助

.main{
	transform: translate(0, 50%) rotate(-90deg);
  
}
.sub{
    white-space: nowrap; 
    width: 250px; 
    height:20px; 
    overflow: hidden;
    text-overflow: ellipsis;   
    text-align:center;       
    position: absolute;  
    cursor: pointer;
    border: 1px solid grey;   
    background: linear-gradient(to right, white, lightgrey);
    border-radius: 2px;
}
.two{
  top:20px;
}

<div class="main">
   <div class="sub one">Hello world!</div>
</div>
<div class="main">
  <div class="sub two">a large text too large to contain tin the div. large text too large to contain tin the div.
  </div>
</div>