Минимизация строк текста, отображаемых на ионном тексте

Question

HTML:

<ion-list *ngFor="let message of messages">
    <ion-item lines="none" type="button" button="true">
        <ion-grid>
            <ion-row>
                <ion-col class="message">
                    <ion-text>
                        {{ message.text }}
                    </ion-text>
                </ion-col>
            </ion-row>
        </ion-grid>
    </ion-item>
</ion-list>

CSS:

.message {
    color: var(--ion-color-default-shade) !important;
    border-radius: 5px;
    padding: 8px;
    max-height: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4em;
}

Я хочу показать только 3 строки <ion-text>. Если это не так, то я хочу показать многоточие, чтобы пользователь мог щелкнуть по нему, чтобы увидеть больше. Тем не менее, мой код выше, кажется, не отображает HTML в эллипсах. Не уверен, что мне не хватает. Любой совет будет полезен.

Answer 1

text-overflow: ellipsis работает с white-space: nowrap CSS. Это событие в одну строку. Однако, если вы хотите использовать многоточие в многострочном тексте, как это было бы здесь - тогда не ожидайте, что вам будет весело. CSS не имеет стандартного метода для этого.

Но вы можете управлять им с помощью скрипта java с количеством символов.

Answer 2

Попробуйте это .. здесь nowrap убедится, что текст никогда не будет перенесен на следующую строку, и добавьте !important к ellipsis.

.message {
  white-space: nowrap !important;
  width: 150px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: var(--ion-color-default-shade) !important;
}

Надеюсь, что это помогает ..:)