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:
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.
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; /* 超出部分显示省略号 */
Page({
data: {
content:'人要拿得起，也要放得下。拿得起是生存，放得下是生活;拿得起是能力，放得下是智慧。有的人拿不起，也就无所谓放下;有的人拿得起，却放不下。拿不起，就会一事无成;放不下，就会疲惫不堪。人生外在的一切最终丝毫也带不走，晚放下不如早放下。放下无谓的负担，才能一路自在。'
}
});display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; /* 指定显示文本的行数 */ overflow: hidden; /* 超出隐藏 */
text-overflow: ellipsis
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
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!
Mini-Programmpfaderfassung
So verwenden Sie die Averageifs-Funktion
Computerbildschirm zeigt kein Signal
Wie richte ich WeChat so ein, dass meine Zustimmung erforderlich ist, wenn mich jemand zu einer Gruppe hinzufügt?
So heben Sie Bargeld bei Yiouokex ab
So überprüfen Sie tote Links auf Ihrer Website
So stellen Sie eine Verbindung zur Datenbank in VB her
Einfaches PHP-Tutorial zum Erstellen von Websites
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
