html - 带有长文本的 CSS 气泡对话丢失格式

Question

我有一个泡沫对话，如下所示：

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

ul li {
  max-width: 50vw;
  display: block;
  clear: both;
  padding: 5px;
  border-radius: 20px;
  margin-bottom: 2px;
  background: #eee;
}

.you {
  grid-column: 1/4;
  width: 75%;
  border: 1px solid #000;
}

.me {
  grid-column: 2/4
}

<div>
  <ul id="myConversation" class="afterheader">
    <li class="me">1234</li>
    <li class="me">44</li>
    <li class="me">333</li>
    <li class="me">333</li>
    <li class="you">33</li>
      <li class="me">254</li>
      <li class="me">21345</li>
      <li class="me">long text long text long text long text long text long text long text long text long text long text long text long text </li>
  </ul>
</div>

它适用于短文本，但对于较长的文本，它正在失去气泡格式。

右侧是所需的功能。左侧是长文本故障示例：

怎么能避免呢？（display:grid在这种情况下，属性是强制性的）

标签： htmlcss

Answer 1

我认为这只是提前定义网格并确保跨越正确数量的列的问题。

这是我的做法：

1. 共定义 4 列。
2. 制作you跨度列 1-3。
3. 制作me跨度列 2-4。
4. ...
5. 利润？

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

ul li {
  display: block;
  clear: both;
  padding: 5px;
  border-radius: 20px;
  margin-bottom: 2px;
  background: #eee;
}

.you {
  grid-column: 1/4;
  border: 1px solid #000;
}

.me {
  grid-column: 2/5;
}

<div>
  <ul id="myConversation" class="afterheader">
    <li class="me">1234</li>
    <li class="me">44</li>
    <li class="me">333</li>
    <li class="me">333</li>
    <li class="you">33</li>
    <li class="me">254</li>
    <li class="me">21345</li>
    <li class="me">long text long text long text long text long text long text long text long text long text long text long text long text </li>
  </ul>
</div>