Untuk menyesuaikan teks pada induknya yang diputar

Saya mendapatkan potongan kode ini menggunakan bootstrap dan css murni:

<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>

seperti yang Anda lihat, saya telah memutar tag div untuk 45 derajat dan tag p -45 derajat.

Saya ingin teksnya pas dan responsif karena tidak ada rotasi di sana.

tapi sekarang teks keluar dari div. bagaimana saya bisa mengendalikannya?


html css rotation bootstrap-4
person Yasin    schedule 12.10.2019    source sumber
comment
ya persegi panjang di belakang teks. Saya tidak ingin itu keluar dari div. Saya mencoba overflow: hidden tetapi menyembunyikan kata-kata yang melewati batas div.   -  person Yasin    schedule 12.10.2019
comment
ya, tetapi teksnya tidak boleh diputar sementara wadahnya berputar. Saya ingin teksnya benar-benar horizontal.   -  person Yasin    schedule 12.10.2019
comment
Kemungkinan duplikat Elemen yang diputar dalam CSS yang memengaruhi tinggi induknya dengan benar   -  person Zohir Salak    schedule 13.10.2019
comment
Kemungkinan duplikat Apakah mungkin untuk memutar elemen, tetapi tidak isinya dengan css3?   -  person Akber Iqbal    schedule 13.10.2019