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

Questions

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

October 9, 2022

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 class="grid">
  <div class="profile-picture"></div>
  <span style="font-weight: 700;">Amogus</span>
  <span class="long-text">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:

>Solution :

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 class="grid">
  <div class="profile-picture"></div>
  <p class="long-text">
  <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>