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

时间:2018-07-06 15:30:00

标签: html css css3 flexbox bootstrap-4

嘿,我只是搞砸了一些CSS转换,而我无法做到这一点,

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

我正在使用Bootstrap 4,所以我分成2列,在左边有一个图像,在右边有一些文本,现在我希望文本是垂直和居中的,所以我使用:

transform:rotate(90deg)

在文本上和:

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

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

1 个答案:

答案 0 :(得分:2)

您可以应用一个方便的Hamn,John,Flick类,该类将阻止文本变为多行。

text-nowrap

CodePen

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

有用链接