我正在尝试进行聊天视图,但是我遇到了CSS问题,该问题很难用英语来解释,因此我将显示其屏幕截图:
我有一个父div,它限制了其子div的宽度可以缩放到多少。在内部div内,我有一个包含文本的段落标签。为什么内部div不能缩放到其最大宽度,而仅在1行中呈现段落标签。当然,我缺少真正愚蠢的东西。代码在这里:
.meMessages {
margin-right: 4%;
margin-left: 2%;
margin-top: 3%;
margin-bottom: 3%;
text-align: left;
max-width: 100%;
}
.msg-details {}
.chat-message {
width: 100%;
display: inline-block;
padding-left: 9%;
padding-right: 9%;
.right-bubble {
border: 1px solid #ddd;
max-width: 100%;
float: right;
position: relative;
background: #dcf8c6;
border-top-left-radius: .4em;
border-bottom-left-radius: .4em;
border-bottom-right-radius: .4em;
padding: 5px 10px 10px;
span.msg-name {
font-size: 12px;
font-weight: bold;
color: green;
margin-right: 7px;
margin-left: 7px;
}
span.msg-date {
font-size: 10px;
}
}
.right-bubble:after {
content: '';
position: absolute;
right: 0;
top: 0;
width: 0;
height: 0;
border: 27px solid transparent;
border-left-color: #dcf8c6;
border-right: 0;
border-top: 0;
margin-top: -13.5px;
margin-right: -27px;
}
}
<div class="chat-message" text-right *ngIf="message['sender'] === logged.username">
<div class="right-bubble">
<div class="msg-details">
<span class="msg-name">{{ 'CHAT.ME' | translate}}</span>
<span class="msg-date">{{message['timestamp'] | date:'short'}}</span>
<ion-icon *ngIf="message['message'] !== '<message deleted>'" slot="start" name="menu" class="menuIcon"
(click)="presentActionSheet(message)">
</ion-icon>
</div>
<p text-wrap class="meMessages">{{message['message']}}</p>
<div>
<span class="msg-date" *ngIf="message['edited'] !== null">{{ 'CHAT.EDITED' | translate}}</span>
<span *ngIf="message['edited'] !== null" class="msg-date">{{message['edited'] | date:'short'}}</span>
</div>
</div>
</div>
答案 0 :(得分:1)
我找到了答案,关键是段落标记中的(width:max-content;),结果如下:
.meMessages {
text-align: left;
max-width: 100%;
width: max-content;
}