


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:
- Einzeiliger Textüberlauf
- 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:'人要拿得起,也要放得下。拿得起是生存,放得下是生活;拿得起是能力,放得下是智慧。有的人拿不起,也就无所谓放下;有的人拿得起,却放不下。拿不起,就会一事无成;放不下,就会疲惫不堪。人生外在的一切最终丝毫也带不走,晚放下不如早放下。放下无谓的负担,才能一路自在。' } });
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; /* 指定显示文本的行数 */ overflow: hidden; /* 超出隐藏 */
text-overflow: ellipsis

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

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

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Mit der Popularität mobiler Internettechnologie und Smartphones ist WeChat zu einer unverzichtbaren Anwendung im Leben der Menschen geworden. Mit WeChat-Miniprogrammen können Benutzer Miniprogramme direkt verwenden, um einige einfache Anforderungen zu erfüllen, ohne Anwendungen herunterladen und installieren zu müssen. In diesem Artikel wird erläutert, wie Sie mit Python ein WeChat-Applet entwickeln. 1. Vorbereitung Bevor Sie Python zum Entwickeln des WeChat-Applets verwenden, müssen Sie die entsprechende Python-Bibliothek installieren. Hier empfiehlt es sich, die beiden Bibliotheken wxpy und itchat zu verwenden. wxpy ist eine WeChat-Maschine

Miniprogramme können React verwenden. 1. Implementieren Sie einen Renderer basierend auf „React-Reconciler“ und generieren Sie eine Miniprogrammkomponente zum Parsen und Rendern von DSL. 3. Installieren Sie npm und führen Sie den Entwickler-Build aus npm im Tool; 4. Führen Sie das Paket auf Ihrer eigenen Seite ein und verwenden Sie dann die API, um die Entwicklung abzuschließen.

Implementieren von Kartenumdreheffekten in WeChat-Miniprogrammen In WeChat-Miniprogrammen ist die Implementierung von Kartenumdreheffekten ein häufiger Animationseffekt, der die Benutzererfahrung und die Attraktivität von Schnittstelleninteraktionen verbessern kann. Im Folgenden wird detailliert beschrieben, wie der Kartenumdrehungseffekt im WeChat-Applet implementiert wird, und relevante Codebeispiele bereitgestellt. Zunächst müssen Sie in der Seitenlayoutdatei des Miniprogramms zwei Kartenelemente definieren, eines für die Anzeige des vorderen Inhalts und eines für die Anzeige des hinteren Inhalts. Der spezifische Beispielcode lautet wie folgt: <!--index.wxml-. ->&l

Laut Nachrichten dieser Website vom 31. Oktober und 27. Mai dieses Jahres kündigte die Ant Group den Start des „Chinese Character Picking Project“ an und leitete kürzlich neue Fortschritte ein: Alipay startete das Miniprogramm „Chinese Character Picking – Uncommon Characters“. um Sammlungen der Gesellschaft zu sammeln. Seltene Charaktere ergänzen die Bibliothek seltener Charaktere und bieten unterschiedliche Eingabeerlebnisse für seltene Charaktere, um die Eingabemethode für seltene Charaktere in Alipay zu verbessern. Derzeit können Benutzer das Applet „Ungewöhnliche Zeichen“ aufrufen, indem sie nach Schlüsselwörtern wie „Aufnehmen chinesischer Zeichen“ und „Seltene Zeichen“ suchen. Im Miniprogramm können Benutzer Bilder von seltenen Zeichen einreichen, die vom System nicht erkannt und eingegeben wurden. Nach der Bestätigung nehmen Alipay-Ingenieure zusätzliche Einträge in die Schriftartenbibliothek vor. Auf dieser Website wurde festgestellt, dass Benutzer im Miniprogramm auch die neueste Eingabemethode zur Wortteilung nutzen können. Diese Eingabemethode ist für seltene Wörter mit unklarer Aussprache konzipiert. Demontage durch den Benutzer

Wie Uniapp eine schnelle Konvertierung zwischen Miniprogrammen und H5 erreichen kann, erfordert spezifische Codebeispiele. Mit der Entwicklung des mobilen Internets und der Popularität von Smartphones sind Miniprogramme und H5 zu unverzichtbaren Anwendungsformen geworden. Als plattformübergreifendes Entwicklungsframework kann Uniapp die Konvertierung zwischen kleinen Programmen und H5 basierend auf einer Reihe von Codes schnell realisieren und so die Entwicklungseffizienz erheblich verbessern. In diesem Artikel wird vorgestellt, wie Uniapp eine schnelle Konvertierung zwischen Miniprogrammen und H5 erreichen kann, und es werden konkrete Codebeispiele gegeben. 1. Einführung in uniapp unia

Implementierungsidee x01 Servereinrichtung Zunächst wird auf der Serverseite ein Socket zum Empfangen von Nachrichten verwendet. Jedes Mal, wenn eine Socket-Anfrage angenommen wird, wird ein neuer Thread geöffnet, um die Verteilung und Annahme von Nachrichten zu verwalten Um alle Threads zu verwalten und damit die Verarbeitung verschiedener Funktionen des Chatrooms zu realisieren, ist die Einrichtung des x02-Clients viel einfacher als die des Servers. Die Funktion des Clients besteht lediglich darin, Nachrichten zu senden und zu empfangen und bestimmte Zeichen einzugeben Um die Verwendung unterschiedlicher Funktionen zu erreichen, müssen Sie daher auf der Clientseite nur zwei Threads verwenden, einen für den Empfang von Nachrichten und einen für das Senden von Nachrichten liegt daran, nur

1. Öffnen Sie das WeChat-Miniprogramm und rufen Sie die entsprechende Miniprogrammseite auf. 2. Den mitgliederbezogenen Zugang finden Sie auf der Miniprogrammseite. Normalerweise befindet sich der Mitgliedereingang in der unteren Navigationsleiste oder im persönlichen Zentrum. 3. Klicken Sie auf das Mitgliedschaftsportal, um die Seite mit dem Mitgliedsantrag aufzurufen. 4. Geben Sie auf der Seite des Mitgliedsantrags relevante Informationen wie Mobiltelefonnummer, Name usw. ein. Nachdem Sie die Informationen ausgefüllt haben, reichen Sie den Antrag ein. 5. Das Miniprogramm prüft den Mitgliedschaftsantrag. Nach bestandener Prüfung kann der Benutzer Mitglied des WeChat-Miniprogramms werden. 6. Als Mitglied genießen Benutzer mehr Mitgliedschaftsrechte, wie z. B. Punkte, Gutscheine, exklusive Aktivitäten für Mitglieder usw.

Schritte zur Miniprogramm-Registrierung: 1. Erstellen Sie Kopien von Personalausweisen, Unternehmenslizenzen, juristischen Personenausweisen und anderen Archivierungsmaterialien. 2. Melden Sie sich beim Miniprogramm-Verwaltungshintergrund an. Wählen Sie „Grundeinstellungen“; 5. Geben Sie die Anmeldeinformationen ein; 6. Laden Sie die Anmeldematerialien hoch; 7. Senden Sie den Anmeldeantrag; 8. Warten Sie auf die Überprüfungsergebnisse. Wenn die Einreichung nicht bestanden wird, nehmen Sie basierend auf den Gründen Änderungen vor und den Einreichungsantrag erneut einreichen. 9. Die Folgemaßnahmen für die Einreichung sind Can.
