Как использовать html / css для выравнивания абзацев пузыря чата?

Question

Итак, я хочу иметь абзац, который может состоять из одной или нескольких строк, который находится на правой стороне страницы, но выровнен по левому краю.

Пример:

¦              Example text to show ¦
¦              where I want the     ¦   <-- Right side of page
¦              paragraph to be.     ¦

Итак Я добавил левое поле и приказал тексту выровняться по левому краю:

<p style="text-align: left; margin-left:>Text</p>

Это работает для длинных абзацев; однако, если длина абзаца меньше строки, он будет выглядеть следующим образом:

  ¦              Short Text           ¦
  ¦                                   ¦   <-- Right side of page
  ¦                                   ¦

вместо:

  ¦                         Short Text¦
  ¦                                   ¦   <-- Right side of page
  ¦                                   ¦

Затем я попытался выровнять абзац по правому краю и выровнять последняя строка слева:

<p style="text-align: right;text-align-last: left; margin-left: 200px">Text</p>

Однако это привело к перевешиванию текста:

¦               Example text to show¦
¦                   where I want the¦   <-- Right side of page
¦              paragraph to be.     ¦

Можно ли каким-либо образом расположить абзац справа от страница со всеми строками, выстроенными в линию, как в первом примере, но не так, чтобы короткая строка не оставалась посередине страницы?

Answer 1

Итак, изначально я неправильно понял ваш вопрос, но с вашими дополнительными комментариями я переработал свой ответ и скорректировал его в соответствии с тем, что вы объяснили. Я думаю, что в вашем вопросе не совсем ясно, что вам нужно для разговора. Сделал пример с пузырями чата, баллы не идеальные, просто играемся :). Но я думаю, что это решит вашу проблему.

В основном вы не можете использовать для этого только элементы p, вам нужен основной контейнер и контейнер для каждого сообщения, и вы используете flex и align-self в каждый внутренний контейнер. Посмотрите текущий пример.

#chat-container {
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.bubble {
  border: solid 1px #DDD;
  background: #EEE;
  margin-bottom: 0.25rem;
  max-width: 60%;
  align-self: flex-start;
  padding: 0.5rem;
  padding: 0.5rem 0.7rem;
  border-radius: 0.75rem;
  position: relative;
}

.bubble::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
  height: 0;
  border: 12px solid transparent;
  border-right-color: #EEE;
  border-left: 0;
  border-top: 0;
  margin-top: -6px;
  margin-left: -12px;
  filter: drop-shadow(0px 1px 0px #DDD) drop-shadow(0px -1px 0px #DDD);
}

.bubble.right {
  border-color: #AAD;
  background: #EEF;
  align-self: flex-end;
}

.bubble.right::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 0;
    height: 0;
    border: 12px solid transparent;
  border-left-color: #EEF;
  border-right: 0;
    border-top: 0;
  margin-top: -6px;
  margin-right: -12px;
  filter: drop-shadow(0px 1px 0px #AAD) drop-shadow(0px -1px 0px #AAD);
  left: initial;
}

.bubble p {
  margin: 0;
}

<div id="chat-container">
  <div class="bubble">
      <p>Hello Sam</p>
  </div>

  <div class="bubble right">
      <p>Hello Frodo</p>
  </div>

  <div class="bubble right">
      <p>Did you bring the ring?</p>
  </div>

  <div class="bubble">
      <p>What ring?</p>
  </div>

  <div class="bubble right">
      <p>The ring Frodo! The one that says Ash nazg durbatulûk, ash nazg gimbatul, Ash nazg thrakatulûk agh burzum-ishi krimpatul when heated.</p>
  </div>

  <div class="bubble">
      <p>Shut up Sam!</p>
  </div>
</div>