使用动态字体大小调整水平文本旁边的直立文本

Question

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

Original Text/Large Screen Text Resized Text/Mobile Screen Text

当前代码

标记

<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 组合用于 font-size。当视口宽度缩短时，容器的高度是间接由于单词中断引起的。您可能需要找到适合您需要的值。

.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>

使用动态字体大小调整水平文本旁边的直立文本

Aligning upright text next to horizontal text with dynamic font resizing

html

javascript

css

styling

svelte

当前代码