CSS背景圖片

Question

我都

我正在使用Ionic2。 我正在嘗試在右下方顯示一個帶有圖像的消息框。 從下面的屏幕截圖中可以看到，圖像（淺綠色）一旦位於消息框之外，就會被隱藏（切斷）。

題

我如何顯示完整圖像？

好像ion-list允許顯示消息框，但不允許顯示消息框之外的任何內容。

更多信息：

圖像為： /assets/message-me.png

 .messages-page-content { > scroll-content { padding: 0; } .messages { height: 100%; background-color: #E0DAD6; background-repeat: no-repeat; background-size: cover; } .message-wrapper { margin-bottom: 9px; &: : after { content: ""; display: table; clear: both; } } .message { display: inline-block; position: relative; max-width: 236px; border-radius: 7px; box-shadow: 0 1px 2px rgba(0, 0, 0, .15); &.message-me { float: right; background-color: white; &: : before { right: -11px; background-image: url(/assets/message-me.png); } } &.message-you { float: left; background-color: blue; &: : before { left: -11px; background-image: url(/assets/message-you.png); } } &.message-you::before, &.message-me::before { content: ""; position: absolute; bottom: 3px; width: 12px; height: 19px; background-position: 50% 50%; background-repeat: no-repeat; background-size: contain; } .message-content { padding: 5px 7px; word-wrap: break-word; &: : after { content: " \\00a0\\00a0\\00a0\\00a0\\00a0\\00a0\\00a0\\00a0\\00a0\\00a0\\00a0\\00a0\\00a0\\00a0\\00a0\\00a0\\00a0\\00a0\\00a0"; display: inline; } } .message-timestamp { position: absolute; bottom: 2px; right: 17px; font-size: 11px; color: gray; } } } 

 <ion-content padding class="messages-page-content"> <ion-scroll scrollY="true" class="messages"> <ion-list> <ion-item class="message-item" *ngFor="let item of firelist | async"> <div [ngClass]="{'message message-me':(item.uid == me.uid)}"> <div [ngClass]="{'message message-you':(item.uid == you.uid)}"> <div class="message-content">{{item.message_text}}</div> <span class="time-tick"> <span class="message-timestamp">{{item.timestamp | amDateFormat: 'DD MMM YYYY h:mm a'}}</span> <div *ngIf="showTick(item) === true"> <span class="checkmark"> <div class="checkmark_stem"></div> <div class="checkmark_kick"></div> </span> </div> </span> </div> </div> </ion-item> </ion-list> </ion-scroll> </ion-content> 

更新

我確實發現是否更改了overflow: hidden; 下面overflow: visible; 它解決了我的問題。 但是，那只是在瀏覽器中，我尚不確定如何在代碼中更改ion-label上的css 。

ion-label {
    display: block;
    overflow: hidden;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin: 0;
    font-size: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Answer 1

就像您在問題中所說的那樣，只需更改離子標簽中的CSS即可：

在CSS文件中，搜索ion-label ，然后在找到所顯示的塊時，更改代碼overflow: hidden; overflow: visible; ，因此如下所示：

ion-label {
    display: block;
    overflow: visible;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin: 0;
    font-size: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
}

或者，如果您無法編輯CSS文件，請直接添加此CSS或將其添加為單獨的文件：

ion-label {
    overflow: visible;
}