如何使用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>

Answer 1

You probably want something like this, so that the .speaker is not overlapping the .sentence element.

I've applied display: flex to the .line so that they sit side by side.

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

Answer 2

Since you'll want all character names to be aligned, your best bet is to go for either a plain old table or a more modern CSS grid. A grid would offer more control, perhaps someone who's more experienced with them than I am can propose a solution. Here's how you'd do it with a table. Note that you can always apply table display options to non-table elements if you care about semantics.

.dialogue {
  border-spacing: 0;
}

.dialogue th, .dialogue td {
  padding: 0 0 1em 0;
  vertical-align: top;
}

.dialogue th {
  text-align: right;
  white-space: pre;
}

.dialogue td {
  text-align: left;
}

<table class="dialogue">
  <tr class="dialogue-alice">
    <th>Alice Bob: </th>
    <td>Culpa eiusmod qui enim Lorem quis aliquip Lorem id. Incididunt velit fugiat irure tempor ad culpa officia. Laborum magna dolor consequat ipsum aute eiusmod ad eu aute enim magna id non esse. Laborum mollit labore aute consectetur culpa cupidatat. Excepteur esse tempor proident reprehenderit minim duis. Irure eu ullamco ex non dolore sit duis consectetur eu enim officia cillum.</td>
  </tr>
  <tr class="dialogue-bob">
    <th>Charles Dickens: </th>
    <td>Anim duis laboris commodo mollit incididunt et cupidatat anim aliquip ipsum pariatur veniam. Sint amet esse et esse ea ea consequat ea. Dolore fugiat id et qui esse et ullamco sunt elit velit id.</td>
  </tr>
</table>

Answer 3

You can try this code

Also, you create it use flexbox please learn flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.parent {
  display: table;
}
.message-row {
  display: table-row;
}
.user,
.message {
  display: table-cell;
  text-align: left;
}

<table style="width:100%">
  <tr>
    <td>Mary </td>
    <td>: Hello</td> 
  </tr>
  <tr>
    <td>Luke</td>
    <td>: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fringilla pharetra metus id blandit.</td> 
  </tr>
</table>

 <hr>
<div class="parent">
  <div class="message-row">
    <div class="user">Mary</div>
    <div class="message">: Hello</div>
  </div>
  <div class="message-row">
    <div class="user">Luke</div>
    <div class="message">: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fringilla pharetra metus id blandit.</div>
  </div>
</div>