Для размещения текста в его повернутом родительском элементе

У меня есть этот фрагмент кода с использованием бутстрапа и чистого css:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="bg-dark">
  <div style="transform:rotate(45deg)" class=" col-4 h-50 bg-danger">
    <p style="transform:rotate(-45deg)" class=" text-light">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error adipisci nisi vel incidunt saepe recusandae minus alias maiores dolore quidem nesciunt dicta nihil aut officia dolor, soluta, at, veniam totam. Lorem ipsum, dolor sit amet consectetur adipisicing
      elit. Error adipisci nisi vel incidunt saepe recusandae minus alias maiores dolore quidem nesciunt dicta nihil aut officia dolor, soluta, at, veniam totam.
    </p>
  </div>
</div>

как видите, я повернул тег div на 45 градусов, а тег p -45 градусов.

Я хочу, чтобы текст был подходящим и отзывчивым, так как там нет поворота.

но теперь текст выпадает из div. как я могу это контролировать?


html css rotation bootstrap-4
person Yasin    schedule 12.10.2019    source источник
comment
да прямоугольник за текстом. Я не хочу, чтобы он выпал из div. Я пробовал overflow: hidden, но он скрывает слова, выходящие за границы div.   -  person Yasin    schedule 12.10.2019
comment
да, но текст не должен вращаться, пока вращается его контейнер. Я хочу, чтобы текст был абсолютно горизонтальным.   -  person Yasin    schedule 12.10.2019
comment
Возможный дубликат повернутых элементов в CSS, которые влияют на высоту их родителя правильно   -  person Zohir Salak    schedule 13.10.2019
comment
Возможный дубликат Можно ли повернуть элемент, но не его содержимое с помощью css3?   -  person Akber Iqbal    schedule 13.10.2019