将垂直文本与水平文本对齐，并动态调整字体大小

Question

我想创建一个CSS组件，在其中我可以将垂直文本与水平文本对齐，如两个图像中所示。我想确保文本的大小可以调整(动态容器高度(。非常感谢您的帮助，谢谢。

原始文本/大屏幕文本大小调整文本/移动屏幕文本

当前代码

标记

<div class="bro-text">
<h4 style="width: {h}px">Vertical</h4>
<h1 bind:clientHeight={h}>
Dummy <br/>
Text
</h1>
</div>

造型

.bro-text {
display: flex;
align-items: flex-end;
}
.bro-text h4, .bro-text h1 {
display: inline-block;
}
.bro-text h4 {
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
}

结果

上述代码的结果https://i.stack.imgur.com/Ma1My.png

Answer 1

使用纯CSS，不太可能根据容器的高度来设置容器的样式。另一种选择是将vw和px的组合与字体大小的calc一起使用。当视图端口宽度缩短时，容器的高度间接是由于单词break造成的。你可能需要找到一个适合你需求的价值观。

.bro-text {
display: flex;
width: 30%;
}
.vertical {
writing-mode: vertical-rl;
transform:scale(-1);
width: auto;
text-align: center;
font-size: calc( 24px - 1vw );
}

<div class="bro-text">

<h4 class="vertical">Vertical</h4>

<h1>
Dummy  Dummy  Text
</h1>
</div>