我正在尝试制作一个聊天 View ,但我遇到了一个 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>
最佳答案
找到答案了,关键是段落标签中的(width: max-content;),结果如下:
.meMessages {
text-align: left;
max-width: 100%;
width: max-content;
}
关于html - 聊天框固定在最大宽度时不会扩展 <p>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57436135/