您需要使自适应块的标题旋转。问题在于块是自适应的，宽度相对于屏幕变化，高度可以任意不同，具体取决于内部内容。转弯的时候需要考虑转弯时方块会移动什么宽度和高度，结果却不一样。文字移出，因为宽度变成高度，高度变成宽度。帮助我理解。
如何保持文本的比例？添加另一个包装器并反转？有可能只有css吗？
期望的结果，标题（红色）应该居中，垂直和水平：
现在像这样：
代码示例：
.block{
position:relative;
padding-left:5rem;
margin:0 auto;
width:50%;
}
.pin{
position:absolute;
display:block;
top:0;
left:0;
bottom:0;
width:3rem;
height:100%;
background:rgba(221, 221, 221, 0.5);
}
.pin span{
position:absolute;
display:inline-block;
top:0;
left:0;
right:0;
bottom:0;
vertical-align:bottom;
text-align:center;
transform:rotate(-90deg);
background:rgba(221, 221, 221, 0.5);
color:red;
}<div class="block">
<div class="pin"><span>Заголовок</span></div>
<p class="text">Текст</p>
<p class="text">Текст Разный текст</p>
<p class="text">Сколько угодно текста текст</p>
<p class="text">Неизвестное количество текста текст</p>
<p class="text">Сколько угодно текста текст</p>
<p class="text">Текст</p>
<p class="text">Текст Разный текст</p>
<p class="text">Сколько угодно текста текст</p>
<p class="text">Неизвестное количество текста текст</p>
<p class="text">Сколько угодно текста текст</p>
<p class="text">Текст</p>
<p class="text">Текст Разный текст</p>
<p class="text">Сколько угодно текста текст</p>
<p class="text">Неизвестное количество текста текст</p>
<p class="text">Сколько угодно текста текст</p>
</div>
