使旋转的文本占据父级的整个高度

【问题标题】：Make rotated text take entire height of parent使旋转的文本占据父级的整个高度
【发布时间】：2018-07-07 01:52:11
【问题描述】：

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

我使用的是 Bootstrap 4，所以我做了 2 列，左边有一个图像，右边有一些文本，现在我希望文本垂直居中，所以我使用：

transform:rotate(90deg)

关于文字和：

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

在列本身。如您所见，问题是在移动设备上，文本连续中断为 2 行和 3 行。

【问题讨论】：

标签： html css flexbox bootstrap-4

【解决方案1】：

有一个方便的 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>

CodePen

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

有用的链接

Bootstrap text-nowrap Documentation

【讨论】：