Html 使旋转文本占据父对象的整个高度

嘿，我只是搞乱了一些css转换，我无法做到这一点

我使用Bootstrap 4，因此我制作了两列，左边是一个图像，右边是一些文本，现在我希望文本垂直居中，因此我使用：

transform:rotate(90deg)

关于案文和：

align-items: center;
text-align: center;

---

在柱子上。您可以看到的问题是，在移动设备上，文本连续断为2行和3行。

有一个方便的

text nowrap

类，您可以应用它来阻止文本变为多行

<div class="container">
    <div class="row mt-5">
        <div class="col-9 ">
            <img class="img-fluid" src="https://images.unsplash.com/photo-1521818372696-23e67aff37a5?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=b42f31aba73642725afa0a222d211542" alt="">
        </div>
        <div class="col-3 d-flex align-items-center justify-content-center">
            <p class="rotate text-nowrap">Azurmendi by ENEKO ATXA</p>
        </div>
    </div>
</div>

ENEKO ATXA的Azurmendi

如果不处理文本大小调整，这可能会对移动设备产生一些潜在的不良影响

有用的链接

---

有一个方便的

text nowrap

类，您可以应用它来阻止文本变为多行

<div class="container">
    <div class="row mt-5">
        <div class="col-9 ">
            <img class="img-fluid" src="https://images.unsplash.com/photo-1521818372696-23e67aff37a5?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=b42f31aba73642725afa0a222d211542" alt="">
        </div>
        <div class="col-3 d-flex align-items-center justify-content-center">
            <p class="rotate text-nowrap">Azurmendi by ENEKO ATXA</p>
        </div>
    </div>
</div>

ENEKO ATXA的Azurmendi

如果不处理文本大小调整，这可能会对移动设备产生一些潜在的不良影响

有用的链接