css - 如何使用 CSS 设置对话/对话的样式？

Question

我试图重现这样的东西，但我不确定它叫什么：

我对标记很灵活，但可能是这样的：https ://codepen.io/nachocab/pen/LaBwzw

.container  {
  width: 600px;
 }
.speaker {
  padding-right: 20px;
}

.speaker::after {
  content: ':';
 }

<div class="container">
  <p class="line">
    <span class="speaker">Mary</span><span class="sentence">Hello</span>
  </p>
  <p class="line">
    <span class="speaker">Luke</span><span class="sentence">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Aenean fringilla pharetra metus id blandit.</span>
  </p>
</div>

标签： css

Answer 1

您可能想要这样的东西，这样不会与元素.speaker重叠。.sentence

我已经申请display: flex了，.line所以他们并排坐着。

.container {
  width: 600px;
}

.speaker {
  padding-right: 10px;
}

.speaker::after {
  content: ':';
}

.line {
  display: flex;
}

<div class="container">
  <p class="line">
    <span class="speaker">Mary</span><span class="sentence">Hello</span>
  </p>
  <p class="line">
    <span class="speaker">Luke</span><span class="sentence">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Aenean fringilla pharetra metus id blandit.</span>
  </p>
</div>