将文本与倾斜的父级对齐而不会使文本倾斜

Question

尝试存档这样的内容。对我来说非常重要的是，要保持倾斜的纵横比。 Didnt使用clip-path或shape-outside存档。 请帮助我 - 这个狗屎让我抓狂。 HTML代码看起来像这样

<div class="wrapper">
<p>text text text text text text text text text text text</p>
</div>

Example of what iam trying to achieve.

我想到了一个解决方案，但没有实现它。只需通过js计算文本中的线条，然后根据线条高度等在线条前面应用边距来完成此操作。 谢谢。

Answer 1

我终于明白了。

没有跨浏览器支持： - （

这是我的解决方案 - 它根本不完美。

这里唯一的事物，角度不相等。您可以看到.text和外.text_content之间的边距从上到下不相等。我不知道为什么，因为数学永远不会说谎:-P

• 第一步是在.angle的文本包装.text旁边添加元素float:left;。
• 第二步从文字包装器.text获取高度，并使用js .angle 提供相同的高度和宽度值>。 .angle元素现在响应文本的长度。
• 第三步现在将.angle元素赋予shape-outside中的多边形，并使用此公式tan（α）* a = b来获取多边形点的右坐标。现在.angle元素允许文本浮动它。

外部.text_content几乎相同。但不是shape-outside使用clip-path来隐藏溢出。

ps：对不起我的英语不好，尽我所能。 ; - ）

function angle_text() {
      var angle_deg = 11;
      var angle_rad = angle_deg * Math.PI/180; 
      //converting to rad
      var height_of_text = $('.text_content .text').height(); 
       //get the height of the text -> including h1 and p
      $('.text_content .angle').height(height_of_text); 
      //setting the height and width of the triangle element equally
      $('.text_content .angle').width(height_of_text);

      var b = Math.tan(angle_rad) * height_of_text; 
      // tan(a) x a = b - width of the triangle polygon in px
      $('.text_content .angle').css('shape-outside', 'polygon(0 0, '+b+'px 0, 0% 100%)') 
      //setting polygon as shape to float text
      $('.text_content .angle').css('clip-path', 'polygon(0 0, '+b+'px 0, 0% 100%)') 
      //setting polygon as path to see the triangle


      var height_of_content = $('.text_content').height(); 
      //get height of the whole block
      var b = Math.tan(angle_rad) * height_of_content; 
      // tan(a) x a = b - width of the triangle polygon in px
      $('.text_content').css('clip-path', 'polygon('+b+'px 0, 100% 0, 100% 100%, 0% 100%)') 
      //setting polygon as path to hide the overflow
  }
  angle_text(); //call function on site ready

  $(window).resize(function() { //call function on window resize
    angle_text();
  });

.text_content {
      margin: 2rem 0;
      color: #fff;
      vertical-align: top;
      text-align: left;
      width: 50%;
      padding:2rem;
      word-wrap: normal;
      line-height: 1.5rem;
      box-sizing:border-box;
      float: right;
      position: relative;
      background: blue;

}
      .angle {

        background: green;
        float:left;

      }
      p {

        margin: 1rem 0;
        font-style:italic;
        
      }

      h1 {
        font-size:2rem;
        line-height:2rem;
        margin: 0;
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="text_content" >
  <div class="angle">
  </div>
  <div class="text">
    <h1>Hey Guys</h1>
    <p>Stackoverflow text Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>
</section>

Answer 2

您遇到的问题是，当仅解除一个<p>元素时，该元素将始终被视为方块。这意味着每个新行垂直向下呈现，而不是跟随父对象的倾斜边缘。要解决这个问题，您只需要将段落分解为更小的单个内联块。

手动执行此操作并不是很好，这就是为什么我会建议使用一层脚本来执行此操作（使用跨浏览器库很容易组合在一起，以及可以定位TextNodes的内容，例如How do I select text nodes with jQuery? ）。但是，您也不希望将此方法用于大量文本 - 因为它会对浏览器产生大量处理。在CSS和JS中都是：

.skew {
  width: 400px;
  transform: skew(-20deg);
  background: red;
}
    
.skew > span {
  display: inline-block;
  transform: skew(20deg);
}

<div class="skew">
<span>This</span> <span>is</span> <span>lots</span> 
<span>of</span> <span>text</span>. <span>This</span> 
<span>is</span> <span>lots</span> <span>of</span> 
<span>text</span>. <span>This</span> <span>is</span> 
<span>lots</span> <span>of</span> <span>text</span>.
<span>This</span> <span>is</span> <span>lots</span> 
<span>of</span> <span>text</span>. <span>This</span> 
<span>is</span> <span>lots</span> <span>of</span> 
<span>text</span>. <span>This</span> <span>is</span> 
<span>lots</span> <span>of</span> <span>text</span>.
<span>This</span> <span>is</span> <span>lots</span> 
<span>of</span> <span>text</span>. <span>This</span> 
<span>is</span> <span>lots</span> <span>of</span> 
<span>text</span>. <span>This</span> <span>is</span> 
<span>lots</span> <span>of</span> <span>text</span>.
</div>

该方法的另一个缺点是，一旦你搞砸了，你就不能再依赖包装块元素来填充/边距。显然，您仍然可以使用特定放置的块元素（即标题或特定类）来处理垂直间距。 E.g。

<h1>Title</h1>
<span>Word</span> <span>word</span> <span>word</span>
<span class="break"></span>
<span>Word</span> <span>word</span> <span>word</span>

所以也不是一个理想的解决方案，但在运行时它只需要CSS，这是一个积极的。

如果支持更多内容shape-outside

，那将会很棒

https://developer.mozilla.org/en/docs/Web/CSS/shape-outside

不幸的是，CSS形状规范似乎需要一段时间才能实现。

https://www.w3.org/TR/css-shapes-1