เพื่อให้พอดีกับข้อความในพาเรนต์ที่หมุน

ฉันมีโค้ดบางส่วนนี้โดยใช้ bootstrap และ pure 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 เป็น 45deg และ p tag -45deg

ฉันต้องการให้ข้อความพอดีและตอบสนองเนื่องจากไม่มีการหมุนเวียน

แต่ตอนนี้ข้อความหลุดออกจาก div ฉันจะควบคุมมันได้อย่างไร?


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
เป็นไปได้ที่ซ้ำกันของ เป็นไปได้หรือไม่ที่จะหมุน องค์ประกอบ แต่ไม่ใช่เนื้อหาด้วย css3?   -  person Akber Iqbal    schedule 13.10.2019