Wie kann der Text des Miniprogramms als Auslassungspunkte angezeigt werden, wenn er überläuft?

In diesem Artikel wird erläutert, wie überlaufender Text in der intelligenten Applet-Entwicklung von Baidu als Ellipsen angezeigt wird.

Wenn in der aktuellen Anzeigeoberfläche des mobilen Endgeräts die Textmenge zu lang ist, wird sie aufgrund von Faktoren wie der Breite und Höhe des Bildschirms möglicherweise nicht vollständig angezeigt Um die Benutzererfahrung zu verbessern, ist es zu diesem Zeitpunkt erforderlich. Wir zeigen überlaufenden Text als Ellipsen an.

Als nächstes schauen wir uns an, wie wir den Stil des Zeilentextüberlaufs für den folgenden Textinhalt implementieren können:

1. Einzeiliger Textüberlauf
2. Mehrzeiliger Text Überlauf: Der gesamte Inhalt unter 5 Zeilen wird angezeigt; über 5 Zeilen (einschließlich 5 Zeilen) werden nur 5 Zeilen angezeigt, und über 5 Zeilen werden Auslassungspunkte angezeigt. Klicken Sie zum Erweitern, um den gesamten Inhalt und eine Schaltfläche zum Reduzieren anzuzeigen. Klicken Sie zum Reduzieren, um den Inhalt zu reduzieren und eine Schaltfläche zum Erweitern anzuzeigen.

Langer Bambuswald, weite Grünflächen, ganz ruhig und still, natürlich ohne den Trubel der Stadt. Wenn der Regen langsam fällt, steigt leichter Rauch auf den grünen Zweigen und Blättern auf, wie Nebel oder Wolken, eher wie ein Tuschegemälde, voller Duft und Duft, und ich weiß nicht, wessen Traum das ist. Was noch berauschender ist, ist das schöne Geräusch des Regens, der immer weiter zerstreut wird und zu einem Klang und einem Lied wird. Zu dieser Zeit besteht der Regen aus dünnen Bambusfäden, die Brise weht und das Flüstern des Herzens wird leise gespielt. Diejenigen, die dem Regen lauschen, sind Busenfreunde.

Einzeiliger Textüberlauf

1 Geben Sie in der js-Datei den Textinhalt ein:

Page({
	    data: {
	        content:'人要拿得起，也要放得下。拿得起是生存，放得下是生活;拿得起是能力，放得下是智慧。有的人拿不起，也就无所谓放下;有的人拿得起，却放不下。拿不起，就会一事无成;放不下，就会疲惫不堪。人生外在的一切最终丝毫也带不走，晚放下不如早放下。放下无谓的负担，才能一路自在。'
	    }
	});

2 CSS-Datei 🎜>Legen Sie die abschließenden Auslassungspunkte fest, die am Ende der Zeile angezeigt werden sollen: text-overflow: ellipsis

   white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 超出隐藏 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */

Mehrzeiliger Textüberlauf

Alle Inhalte unter 5 Zeilen anzeigen

1. Geben Sie in der js-Datei den Textinhalt ein:

	Page({
	    data: {
	        content:'人要拿得起，也要放得下。拿得起是生存，放得下是生活;拿得起是能力，放得下是智慧。有的人拿不起，也就无所谓放下;有的人拿得起，却放不下。拿不起，就会一事无成;放不下，就会疲惫不堪。人生外在的一切最终丝毫也带不走，晚放下不如早放下。放下无谓的负担，才能一路自在。'
	    }
	});

2 am Ende der Zeile, um die abschließenden Auslassungspunkte anzuzeigen, und der mehrzeilige Text läuft über:

	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5; /* 指定显示文本的行数 */
	overflow: hidden; /* 超出隐藏 */

text-overflow: ellipsis

Es werden nur 5 Zeilen angezeigt Wenn mehr als 5 Zeilen (einschließlich 5 Zeilen) vorhanden sind und die Ellipsen darüber hinaus angezeigt werden

1 Geben Sie in der js-Datei den Textinhalt ein:

Page({
	    data: {
	        content:'人要拿得起，也要放得下。拿得起是生存，放得下是生活;拿得起是能力，放得下是智慧。有的人拿不起，也就无所谓放下;有的人拿得起，却放不下。拿不起，就会一事无成;放不下，就会疲惫不堪。人生外在的一切最终丝毫也带不走，晚放下不如早放下。放下无谓的负担，才能一路自在。'
	    }
	});

2. Verwenden Sie

in der CSS-Datei, um das Ende der Zeile so festzulegen, dass die abschließenden Auslassungspunkte und der mehrzeilige Text angezeigt werden:

display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5; /* 指定显示文本的行数 */
	overflow: hidden; /* 超出隐藏 */
	text-overflow: ellipsis; /* 超出部分显示省略号 */

text-overflow: ellipsis

Mehr als 5 Zeilen, Schaltfläche zum Erweitern anzeigen

Klicken Sie zum Erweitern, zum Anzeigen des gesamten Inhalts und zum Reduzieren. Klicken Sie zum Reduzieren, zum Reduzieren des Inhalts und zum Anzeigen der Schaltfläche. Erweitern Sie die Schaltfläche und zeigen Sie weitere Details an Importieren des Code-Snippets im Tool: swanide://fragment/598981d541fda485a1715266effc213a1590053197948.

1. Geben Sie den Textinhalt in die Swan-Datei ein und legen Sie die Schaltfläche fest:

<view class="container">
	<view class="title">
		<text class="title_txt">hello，我是测试demo</text>
	</view>
	<view class="content {{isShow ? &#39;on&#39; : &#39;&#39;}}">
		悠悠竹林，万顷翠色，几多清幽和宁静，自然没有城市的喧嚣和杂乱。若有雨徐徐飘落，在绿绿的枝叶上腾起袅袅轻烟，如雾，如云，更似一幅水墨丹青，流芳沁馨，不知泊了谁的梦怀。更醉人的是那动听的雨声，疏疏落落，潇然成音成曲。此时，雨为纤指竹为弦，清风流韵，细弹心语，听雨的人，便是知音。
	</view>
	<block s-if="{{lineNum > 4}}">
		<view class="btn" bindtap="open">{{isShow ? &#39;收起&#39; : &#39;展开&#39;}}</view>
	</block>
</view>

2. Legen Sie die Anzahl der Textanzeigezeilen in der CSS-Datei fest:

.title {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 25rpx;
}

.title_txt {
    font-size: 34rpx;
    color: #2b2b2b;}

.content {
    text-indent: 2em;
    height: auto;
    overflow: hidden; /* 超出隐藏 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
    display: -webkit-box;
    -webkit-line-clamp: 5; /* 指定显示文本的行数 */
    -webkit-box-orient: vertical;
    line-height: 30px; /* 规定的行高 */
    padding: 0 25rpx;
    font-size: 30rpx;
    color: #888;}

.content.on {
    display: block;
    text-overflow: clip;
    overflow: visible;
}

.btn {
    text-align: center;
    color: #333;}

3 . In js Legen Sie den standardmäßigen reduzierten Status in der Datei fest:

/**
 * 默认收起状态，isShow作为控制显隐的开关
 * 点击按钮isShow的状态值取反即可。
 * 获取行数的计算方式：
 * 行数 = 内容高度/ 行高
 */
Page({
    data: {
        isShow: false,
        lineNum: 5
    },    open() {
        this.setData({
            isShow: !this.data.isShow
        });
    },    onShow() {
        const query = swan.createSelectorQuery();
        query.select('.content').boundingClientRect();
        query.exec(res => {
            const LineHeight = 30; // 行高
            const LineNum = res[0].height / LineHeight; // 行数            if (LineNum < 5) {
                this.setData({
                    lineNum: LineNum
                });
            }
        });
    }
});

Empfohlene Artikel: „

PHP

“ „Mini Program Development "

Das obige ist der detaillierte Inhalt vonWie kann der Text des Miniprogramms als Auslassungspunkte angezeigt werden, wenn er überläuft?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!