时间戳

首页 > 解决方案 > 最小化 ion-text 上显示的文本行

html - 最小化 ion-text 上显示的文本行

问题描述

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。不知道我错过了什么。任何建议都会很有用。

标签： htmlcssangulartypescriptionic-framework

解决方案

试试这个..这里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;
}

希望这可以帮助.. ：）

推荐阅读