Question

我正在建立一个聊天客户端。我面临的一个主要问题是无法强制邮件出现在下一行。根据消息的大小，它会尝试适合同一行中的可用空间。

html看起来像：

<ion-content padding>
    <div class="chat-container">    
        <div *ngFor="let item of items">
            <simple-message *ngIf="item.templateType == 'simple'" [data]="item"></simple-message>
        </div>
    </div>
</ion-content>

模板是：

@Component({
    selector : 'simple-message',
    template : `<p [ngClass]="(data.responder == 'agent')?'chatbubble':'chatbubble-reply'">{{data.msg}}</p>`

})

scss是：

.chat-container{
        padding-bottom: 50px;
    }

    .chatbubble{
        border: 1px solid #F1F0F0;
        border-radius: 10px;
        background-color: #F1F0F0;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 5px;
        padding-bottom: 5px;
        float: left;
        max-width: 80%;
    }

    .chatbubble-reply{
        border: 1px solid #0084FF;
        border-radius: 10px;
        background-color: #0084FF;
        color: white;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 5px;
        padding-bottom: 5px;
        float: right;
        max-width: 80%;
    }

我试过替换

Answer 1

尝试以下CSS解决方案并告诉我们：

overflow-wrap: break-word;

Documentation for overflow-wrap

white-space: pre-line;

Documentation for white-space

使用CSS3：

.chatbubble:after { content: ' '; display: block; }

Documentation

<强>更新

为什么不尝试在模板中添加<br>？

template : `<p [ngClass]="(data.responder == 'agent')?'chatbubble':'chatbubble-reply'">{{data.msg}}</p><br>`

anuglar 2离子2 html问题

1 个答案: