CSS文字结尾缩进 [英] CSS text ending indentation

问题描述

我正在尝试通过CSS实现红色突出显示的效果.第一行最长，第二行较短，依此类推.

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

我正在使用Jade和SASS，下面是我的代码:

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

玉

#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.

推荐答案

有些东西叫做不受很好的支持:

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>

这篇关于CSS文字结尾缩进的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！