How to prevent content from overflowing in a skewed div element?

I encountered an issue where the text extends outside a skewed div.

I managed to straighten the text inside the paragraph, but this caused the text to overflow from the div.

.leftStyle {
  background: #CCC;
  margin: 100px auto;
  border: 1px solid #000;
  width: 300px;
  height: 400px;
  transform: skewX(-30deg);
  left: 100px;
  top: 0px;
  position: absolute;
  /*overflow: hidden;*/
}

.leftStyle p {
  transform: skewX(30deg);
}

<div class="leftStyle">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime in blanditiis tempore adipisci nihil, eveniet exercitationem minima perspiciatis velit illum, totam quod numquam, alias enim tenetur voluptatibus autem tempora! Eaque, facere? Alias, adipisci
    praesentium animi, esse quaerat pariatur obcaecati, reiciendis excepturi placeat eos sint. Eaque dolorem id officiis ex nemo, voluptates facere ipsam saepe. Ullam iure amet illo aut voluptate, corrupti dolorem iste dolores tempore molestias nemo error
    exercitationem temporibus.</p>
</div>

I tried setting overflow: hidden;, but that resulted in the text being clipped.

You need to sign in to view this answers

Related Post