How to wrap a long text while first line of it remain at top but the other lines break-CodePudding

I've made a comment section used grid-box like this:

.grid {
  display: grid;
  align-items: center;
  justify-items: center;
  grid-template: 70px auto / 70px auto auto;
}

.profile-picture {
  width: 42px;
  height: 42px;
  background-color: #aaa;
  border-radius: 50%;
}
.long-text {
    grid-column: 2 / -1;
    grid-row: 2 / -1;
}

<div >
  <div ></div>
  <span style="font-weight: 700;">Amogus</span>
  <span >Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi dolor est error aspernatur. Obcaecati fuga inventore ab cumque enim ipsam quisquam delectus ad, dolor numquam molestias necessitatibus ratione quis facere! Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi dolor est error aspernatur. Obcaecati fuga inventore ab cumque enim ipsam quisquam delectus ad, dolor numquam molestias necessitatibus ratione quis facere!</span>
</div>

The long text is either completely separated from the title and photo or is completely attached by switching between

.long-text {
   /* separated one */
   grid-column: 2 / -1;
   grid-row: 2 / -1;
}

And

.comment-text {
  /* attached one */
  grid-column: 3 / -1;
  grid-row: 1 / -1;
}

But I want something like this:

CodePudding user response：

Wrap long text in paragraph element and place it in second row. Also you don't need to place long text in span, just move it's class to <p> tag.

.grid {
  display: grid;
  align-items: center;
  justify-items: center;
  grid-template: 70px auto / 70px auto auto;
}

.profile-picture {
  width: 42px;
  height: 42px;
  background-color: #aaa;
  border-radius: 50%;
}
.long-text {
    grid-column: 2 / -1;
    grid-row: 1 / -1;
}

<div >
  <div ></div>
  <p >
  <span style="font-weight: 700;">Amogus</span>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi dolor est error aspernatur. Obcaecati fuga inventore ab cumque enim ipsam quisquam delectus ad, dolor numquam molestias necessitatibus ratione quis facere! Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi dolor est error aspernatur. Obcaecati fuga inventore ab cumque enim ipsam quisquam delectus ad, dolor numquam molestias necessitatibus ratione quis facere!
</p>
</div>

CodePudding user response：

I should've added a div or p element as a parent of two span tags (username, long-text) and it fixed :)