CSS文本缩进结局(CSS text ending indentation)

CSS文本缩进结局(CSS text ending indentation)

大家晚上好。

1'm努力实现红色突出显示，CSS效果。 第一行是最长的，第二较短等问题。

https://codepen.io/make96/pen/QmMJyx

1'm使用玉和萨索和下面是我的代码：

#section min-height: auto width: 100vw background: black .content margin: 0 auto padding: 7vh 0 width: 52vw //border: 1px solid white position: relative h1,h2 color: #c9d0d4 font-family: 'Helvetica Neue', sans-serif font-size: 1.2em font-weight: 100 letter-spacing: 1px padding: 0 margin-bottom: 1.2vh width: 50vw h2 font-size: 1em width: 32vw margin-bottom: 3vh p color: #bbc3c8 font-family: 'Verdana', sans-serif font-size: 0.8em line-height: 1.6vh margin: 0 0 6px 0 width: 40vw

WEA

#section .content h1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. h2 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

I'm trying to achieve the red highlighted effect with CSS. The first row to be the longest, the second shorter and so on.

https://codepen.io/make96/pen/QmMJyx

I'm using Jade and SASS and below is my code:

#section min-height: auto width: 100vw background: black .content margin: 0 auto padding: 7vh 0 width: 52vw //border: 1px solid white position: relative h1,h2 color: #c9d0d4 font-family: 'Helvetica Neue', sans-serif font-size: 1.2em font-weight: 100 letter-spacing: 1px padding: 0 margin-bottom: 1.2vh width: 50vw h2 font-size: 1em width: 32vw margin-bottom: 3vh p color: #bbc3c8 font-family: 'Verdana', sans-serif font-size: 0.8em line-height: 1.6vh margin: 0 0 6px 0 width: 40vw

Jade

#section .content h1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. h2 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

最满意答案

有一些所谓的形状之外 ，它可以帮助做到这一点，但当然不能很好的支持 ;

.shape {
  shape-outside: polygon(0 300px, 300px 0, 300px 300px);
  width: 300px;
  height: 300px;
  float: right;
}

p {
  text-align: justify;
} 
  
<div class="shape"></div>
<p>lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem
  ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume</p> 
  
 
There is something called shape-outside that can help to do this but of course not well supported :
 
 
 
  
  
.shape {
  shape-outside: polygon(0 300px, 300px 0, 300px 300px);
  width: 300px;
  height: 300px;
  float: right;
}

p {
  text-align: justify;
} 
  
<div class="shape"></div>
<p>lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem
  ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume</p>