如何防止倾斜的div元素中内容溢出？

Question

我遇到了文本延伸到倾斜 div 之外的问题。 我设法拉直段落内的文本，但这导致文本从 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>

我尝试设置

overflow: hidden;

，但这导致文本被剪切。

Answer 1

如果您将所有

内容缩短至每行不超过三行并添加一个小边距，那么看起来就可以了。

根据您的用例，这可能适合您。

.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);
  margin-left: 1rem;
}

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