When the applet text overflows, how can it be displayed as an ellipsis?

This article introduces how to display overflowing text as ellipses in Baidu smart applet development.

In the current display interface developed on the mobile terminal, if the amount of a piece of text is too long, it may not be fully displayed due to factors such as the width and height of the screen. In order to improve the user experience, this time it is necessary We display overflow text as ellipses.

Next let’s take a look at how we can implement the line text overflow style for the following text content:

1. Single line text overflow
2. Multiple lines Text overflow: All content below 5 lines will be displayed; above 5 lines (including 5 lines), only 5 lines will be displayed, and ellipsis will be displayed in the excess; and an expand button will be displayed above 5 lines. Click to expand to display all content and a collapse button; click to collapse to collapse the content and display an expand button.

Long bamboo forest, vast expanse of green, how quiet and quiet, naturally without the hustle and bustle of the city. If the rain falls slowly, light smoke will rise on the green branches and leaves, like mist or clouds, more like an ink painting, full of fragrance and fragrance, and I don't know whose dream it is. What's even more intoxicating is the beautiful sound of rain, which is scattered and scattered, and it becomes a sound and a song. At this time, the rain is slender, the bamboo is stringed, the breeze is flowing, and the heart is whispering. Anyone who listens to the rain is a bosom friend.

Single line text overflow

1. In the js file, enter the text content:

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

2. Use # in the css file ##text-overflow: ellipsisSet the trailing ellipsis to be displayed at the end of the line:

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

Multi-line text overflow

# Display all content below line 5

1. In the js file, enter the text content:

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

2. Use

text-overflow in the css file: ellipsis Set the end of the line to display the trailing ellipsis, and multi-line text overflows:

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

5 or more lines (including 5 lines) only 5 lines are displayed, and the ellipsis in the excess part is displayed

1. In the js file, enter the text content:

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

2. Use

text-overflow: ellipsis in the css file Set the end of the line to display the trailing ellipsis, and multi-line text overflow:

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

Display the expand button after 5 lines or more

Click to expand to display the entire content and the collapse button; click to collapse the content and display the expand button. For more details, you can import the code snippet in the tool to view: swanide://fragment/598981d541fda485a1715266effc213a1590053197948.

1. Enter the text content in the swan file and set the button:

<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. Set the number of text display lines in the css file:

.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 Set the default collapsed state in the file:

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

Recommended articles: "

PHP" "小program development"

The above is the detailed content of When the applet text overflows, how can it be displayed as an ellipsis?. For more information, please follow other related articles on the PHP Chinese website!