Lorsque le texte de l'applet déborde, comment peut-il être affiché sous forme de points de suspension ?

Cet article explique comment afficher le texte débordant sous forme d'ellipses dans le développement d'applets intelligents Baidu.

Dans l'interface d'affichage actuelle développée sur le terminal mobile, si la quantité d'un morceau de texte est trop longue, il peut ne pas être entièrement affiché en raison de facteurs tels que la largeur et la hauteur de l'écran. pour améliorer l'expérience utilisateur, il est nécessaire à ce moment-là d'afficher le texte de débordement sous forme d'ellipses.

Voyons ensuite comment nous pouvons implémenter le style de débordement de texte en ligne pour le contenu de texte suivant :

1. Débordement de texte sur une seule ligne
2. Texte sur plusieurs lignes débordement : tout le contenu en dessous de 5 lignes sera affiché ; au-dessus de 5 lignes (y compris 5 lignes), seules 5 lignes seront affichées, et des points de suspension seront affichés en excès et un bouton de développement sera affiché au-dessus de 5 lignes. Cliquez pour développer pour afficher tout le contenu et un bouton de réduction ; cliquez pour réduire pour réduire le contenu et afficher un bouton de développement.

Longue forêt de bambous, vaste étendue de verdure, assez calme et tranquille, naturellement sans l'agitation de la ville. Si la pluie tombe lentement, une légère fumée s'élèvera sur les branches et les feuilles vertes, comme du brouillard ou des nuages, plus comme une peinture à l'encre, pleine de parfum et de parfum, et je ne sais pas de qui rêve. Ce qui est encore plus enivrant, c'est le beau bruit de la pluie, qui se disperse et se disperse, et devient un son et une chanson. À cette époque, la pluie est faite de fines cordes de bambou, la brise coule et les murmures du cœur se font entendre doucement. Ceux qui écoutent la pluie sont des amis intimes.

Débordement de texte sur une seule ligne

1 Dans le fichier js, saisissez le contenu du texte :

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

2. fichier css 🎜>Définissez les points de suspension à afficher à la fin de la ligne : text-overflow: ellipsis

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

Débordement de texte sur plusieurs lignes

Tout le contenu en dessous de 5 lignes Afficher

1 Dans le fichier js, saisissez le contenu du texte :

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

2. Utilisez

dans le fichier css pour définir. la fin de la ligne pour afficher les points de suspension de fin, et le texte multiligne déborde : text-overflow: ellipsis

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

Seules 5 lignes seront affichées s'il y a plus de 5 lignes (dont 5 lignes), et les ellipses au-delà seront affichées

1 Dans le fichier js, saisissez le contenu du texte :

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

2. Utilisez

dans le fichier CSS pour définir la fin de la ligne afin d'afficher les points de suspension de fin, et le texte multiligne déborde : text-overflow: ellipsis

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

Plus de 5 lignes, affichez le bouton Développer

Cliquez pour développer, afficher tout le contenu et réduire le bouton ; cliquez pour réduire, réduire le contenu et afficher Développez le bouton et affichez plus de détails en importer l'extrait de code dans l'outil : swanide://fragment/598981d541fda485a1715266effc213a1590053197948.

1. Saisissez le contenu du texte dans le fichier cygne et définissez le bouton :

<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 Définissez le nombre de lignes d'affichage du texte dans le fichier CSS :

.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. . Dans js Définissez l'état réduit par défaut dans le fichier :

/**
 * 默认收起状态，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
                });
            }
        });
    }
});

Articles recommandés : "

PHP" "Développement de mini-programmes "

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!