具有响应性的垂直文本

Question

我正在为垂直文本苦苦挣扎

这是我的plunker

我想做的是在哪里制作垂直文本：

1. 如果短文本出现在竖排文本的 div 中，那么它应该在 div 的中间
2. 如果 div 内有长文本，它应该从页面底部开始，但它应该是响应式的（例如，如果我最小化我的窗口底部文本不应该隐藏它会在 div 中上升）和...竖排文本中大文本的最后应有省略号

我已经实现了 1。但是 2nd 没有完全工作，没有响应，文本进入 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>