时间戳

首页 > 解决方案 > 使旋转文本占据父级的整个高度

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

问题描述

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

https://codepen.io/simobm/pen/YvoOMO

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

transform:rotate(90deg)

在文本和：

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

关于列本身。如您所见，问题是在移动设备上，文本连续分成 2 行和 3 行。

标签： htmlcssflexboxbootstrap-4

解决方案

您可以应用一个方便的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>

代码笔

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

有用的链接

推荐阅读