右寄せしたテキストの改行部分を左に寄せたい

cssの記述について教えていただきたいです。

現在、railsでチャット機能を実装しており、ユーザーで左右に振り分けるラインのようなかんじの画面となっております。

お知恵を貸していただきたい内容は、自分が投稿した際に右側に出るテキストの改行部分を左に詰めたいという内容です。
現在、条件分岐を設定し左右に振り分けたのですが改行すると右に寄ってしまいます・・・

cssの記述は、text-alignでrightとleftで分けました。
max-widthは500pxにしてword-wrap: break-wordで要素幅以上になった部分を改行しております。
改行した部分を左に寄せるには、どのようなcssをあてれば良いのでしょうか・・・。

足りない記述等ございましたら追記いたしますので、ご指示ください。
どなたかお詳しい方、ご教示いただけないでしょうか。
何卒よろしくお願いいたします。

ruby
1<div class="comments">
2      <h4>チャット一覧</h4>
3      <div class="comment-inner">
4        <% if seller_signed_in? %>
5          <% @comments.each do |comment| %>
6            <% if comment.seller_id.present? %>
7              <div class="comment-right">
8                <p class="comment-nickname">
9                  <%= comment.seller.nickname %>
10                </p>
11                <div class="chat-text-right">
12                  <p class="chat-comment-right">
13                    <%= comment.text %>
14                  </p>
15                </div>
16                <span>
17                  <%= image_tag comment.image.variant(resize:'350x350'), class: "comment-image" if comment.image.attached? %>
18                </span>
19              </div>
20            <% else %>
21              <div class="comment-left">
22                <p class="comment-nickname">
23                  <%= comment.buyer.nickname %>
24                </p>
25                <div class="chat-text-left">
26                  <p class="chat-comment-left">
27                    <%= comment.text %>
28                  </p>
29                </div>
30                <p>
31                  <%= image_tag comment.image.variant(resize:'350x350'), class: "comment-image" if comment.image.attached? %>
32                </p>
33              </div>
34            <% end %>
35          <% end %>
36        <%elsif buyer_signed_in?%>
37          <% @comments.each do |comment| %>
38            <% if comment.buyer_id.present? %>
39              <div class="comment-right">
40                <p class="comment-nickname">
41                  <%= comment.buyer.nickname %>
42                </p>
43                <div class="chat-text-right">
44                  <p class="chat-comment-right">
45                    <%= comment.text %>
46                  </p>
47                </div>
48                <p>
49                  <%= image_tag comment.image.variant(resize:'350x350'), class: "comment-image" if comment.image.attached? %>
50                </p>
51              </div>
52            <% else %>
53              <div class="comment-left">
54                <p class="comment-nickname">
55                  <%= comment.seller.nickname %>
56                </p>
57                <div class="chat-text-left">
58                  <p class="chat-comment-left">
59                    <%= comment.text %>
60                  </p>
61                </div>
62                <p>
63                  <%= image_tag comment.image.variant(resize:'350x350'), class: "comment-image" if comment.image.attached? %>
64                </p>
65              </div>
66            <% end %>
67          <% end %>
68        <% end %>
69      </div>
70</div>
71

css
1
2.comment-right {
3  text-align: right;
4}
5
6.comment-left {
7  text-align: left;
8}
9
10.chat-text-right {
11  position: relative;
12  display: inline-block;
13  margin: 1.5em 15px 1.5em 0;
14  padding: 7px 10px;
15  min-width: 120px;
16  max-width: 500px;
17  color: rgb(51, 51, 51);
18  font-size: 16px;
19  background: #e0edff;
20  border-radius: 10px;
21  word-wrap: break-word;
22}
23
24.chat-text-right:before {
25  content: "";
26  position: absolute;
27  top: 50%;
28  left: 100%;
29  margin-top: -15px;
30  border: 15px solid transparent;
31  border-left: 15px solid #e0edff;
32}
33
34.chat-text-left {
35  position: relative;
36  display: inline-block;
37  margin: 1.5em 0 1.5em 15px;
38  padding: 7px 10px;
39  min-width: 120px;
40  max-width: 500px;
41  color: rgb(51, 51, 51);
42  font-size: 16px;
43  background: #e0edff;
44  border-radius: 10px;
45  word-wrap: break-word;
46}
47
48.chat-text-left:before {
49  content: "";
50  position: absolute;
51  top: 50%;
52  left: -30px;
53  margin-top: -15px;
54  border: 15px solid transparent;
55  border-right: 15px solid #e0edff;
56}
57

hatena19

2020/09/20 10:50

現状のHTMLとCSSを提示してください。

miki623

2020/09/20 11:18

ご連絡有り難うございます！ htmlとcssを追記いたしました。

Daregada

2020/09/20 11:45

「やりたいことは右揃えではない」という自覚はありますか。「吹き出しを右に寄せたい」と、「吹き出しの中で左揃えで表示したい」は両立します。

行動規範の内容に同意します

回答1件

ベストアンサー

右の吹き出しブロックに text-align: left; を使いすればいいだけでは。

css
1.chat-text-right {
2  position: relative;
3  display: inline-block;
4  margin: 1.5em 15px 1.5em 0;
5  padding: 7px 10px;
6  min-width: 120px;
7  max-width: 500px;
8  color: rgb(51, 51, 51);
9  font-size: 16px;
10  background: #e0edff;
11  border-radius: 10px;
12  word-wrap: break-word;
13  text-align: left; /* 追加 */
14}