CODEWITHSUNDEEP
htmlcss
saleh
saleh

Reputation: 347

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

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:

my goal

Upvotes: 0

Views: 43

Answers (2)

saleh
saleh

Reputation: 347

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

Upvotes: 0

Jovana
Jovana

Reputation: 608

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>

Upvotes: 1

Related Questions