0

I've got this slice of code using bootstrap and 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>

as you see I've rotated the div tag for 45deg and p tag -45deg.

I want the text to be fit and responsive as there is no rotation on there.

but now text falls out of div. how can I control it?

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
Yasin
  • 103
  • 10
  • yeah a rectangle behind the text. I don't want it be fallen out of div. I tried `overflow: hidden` but it hides the words that pass the boundaries of div. – Yasin Oct 12 '19 at 18:40
  • yeah but the text must not rotate while its container does.i want the text to be absolutely horizontal. – Yasin Oct 12 '19 at 19:07
  • Possible duplicate of [Rotated elements in CSS that affect their parent's height correctly](https://stackoverflow.com/questions/16301625/rotated-elements-in-css-that-affect-their-parents-height-correctly) – Rainbow Oct 12 '19 at 21:19
  • Possible duplicate of [Is it possible to rotate element, but not its content with css3?](https://stackoverflow.com/questions/16656394/is-it-possible-to-rotate-element-but-not-its-content-with-css3) – Akber Iqbal Oct 13 '19 at 03:33

0 Answers0