html - 具有响应能力的垂直文本

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>