如何在第一行保留在頂部但其他行中斷時換行長文本-有解無憂

我做了一個評論部分使用這樣的網格框：

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

長文本要么與標題和照片完全分離，要么通過切換完全附加

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

和

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

但我想要這樣的東西：

如何在第一行保留在頂部但其他行中斷時換行長文本

uj5u.com熱心網友回復：

在段落元素中換行長文本并將其放在第二行。此外，您不需要在跨度中放置長文本，只需將其類移動到<p>標記。

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

uj5u.com熱心網友回復：

我應該添加一個divorp元素作為兩個跨度標簽（用戶名，長文本）的父元素，并且它已修復:)

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/512279.html

標籤：htmlcss

上一篇：僅為移動版本引導col-lg-6交換列

下一篇：來自檔案的背景影像