Вертикальный текст с отзывчивостью

Question

Я борюсь с вертикальным текстом

Вот мой Плункер

Я пытаюсь сделать вертикальный текст, где:

1. Если короткий текст находится внутри div вертикального текста, то он должен быть в середине div
2. Если внутри div находится длинный текст, его следует начинать с нижней части страницы, но он должен быть отзывчивым (например, если я сверну текст в нижней части окна, он не должен скрываться, он поднимется в div) и ... эллипсы должны быть в конце большого текста в вертикальном тексте

Я достиг 1. Но 2-й не полностью работает, нет реакции, и текст идет внутри 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>