Как оформить беседу / диалог с помощью css?

#css

Вопрос:

Я пытаюсь воспроизвести что-то подобное, но я не уверен, как это называется:

Я гибок в разметке, но, вероятно, что-то вроде этого: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>

Ответ №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>

1. Так просто! Спасибо

2. Предложения только ~ совпадают друг с другом, потому что имена имеют одинаковую длину. Вы, вероятно, захотите применить гибкую основу для .speaker и предотвратить рост / сжатие. flex: 0 0 200px , например.

Ответ №2:

Поскольку вы хотите, чтобы все имена символов были выровнены, лучше всего использовать либо обычную старую таблицу, либо более современную CSS-сетку. Сетка предложила бы больше контроля, возможно, кто-то, кто более опытен в них, чем я, может предложить решение. Вот как бы вы сделали это с таблицей. Обратите внимание, что вы всегда можете применить параметры отображения таблицы к элементам, не относящимся к таблице, если вас интересует семантика.

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

1. Обратите внимание, что в моем примере я выровнял имена по правому краю, но вы можете выровнять их по левому краю, если это то, что вы хотите.

2. Отличная мысль. Вот что я в итоге использовал: codepen.io/nachocab/pen/drqMMp

3. Круто! Хотя я не уверен, что использовал бы псевдоэлемент для двоеточия, поскольку технически это часть содержимого. Поисковые системы и программы чтения с экрана могут игнорировать их, и они теряются при попытке копирования-вставки.

Ответ №3:

Вы можете попробовать этот код

Кроме того, при его создании используется flexbox, пожалуйста, изучите flexboxhttps://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>