html - 聊天框不展开
当它固定在最大宽度时
问题描述
我正在尝试创建一个聊天视图,但我遇到了一个 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;
}
推荐阅读
- google-chrome - 桌面谷歌浏览器拼写检查是否受操作系统影响?
- httpwebresponse - How to fix Veracode error "Server-Side Request Forgery (SSRF)" when using HttpWebResponse?
- android - React-Native Error: Unable to resolve module
- computer-vision - 立体系统中的三角测量导致的深度误差
- html - 至少 3 个单词或更多,但使用阿拉伯语 [HTML 模式]
- python - 在多字串的空格之间添加一个字符
- c - C 一个无符号整数怎么可能只占用两个字节?
- javascript - regex for only lowercase letters and underscore
- javascript - 如何更改图例点的颜色?
- swift - recent messages with firestore - 1 second document write limit - swift