1. Introduction

Dragon Boat Festival holiday is relatively idle, some small problems encountered this week to do a simple combing record.

2. Single line beyond…

When the content of the text exceeds a certain length, the exceeding part of the content is hidden, with… The specific code is as follows:

width: 300rpx; // Box the size of the content area. You can also box overflow: hidden; Text-overflow: ellipsis; // Use ellipses to represent hidden text white-space: nowrap; // Forces text to be displayed on a single lineCopy the code

3. Multiple lines of text beyond…

Sometimes the content displayed in a single line is too little, but due to the limited space it is impossible to show all, so the UI expects to show N lines, if there are more than again use… The specific code is as follows:

width: 300rpx; // Frame the size of the content area overflow: hidden; text-overflow: ellipsis; display: -webkit-box; Webkit-line-clamp: 2; // Set the number of rows to display -webkit-box-orient: vertical; // Set the arrangement of the child elements of the flex box vertically from top to bottomCopy the code

4. More than… It is followed by a small icon

Sometimes there is a complication where you need to follow the text with an icon, and when the text overflows, the icon is displayed as usual.

As shown below, the small red box is always displayed.

Let’s take a look at the expected effect without exceeding:

And look at what you expect when you exceed:The parent element container in the ‘block’ state when text-overflow is in effect.

The specific implementation code is as follows:

// WXML <view class="wrapper"> <view class="test"> Test ultra long part hiding; Test ultra long part hiding; Test ultra long part hiding; Test ultra long part hiding; Test ultra long part hiding; <text class="icon"></text></view> </view> // wxss.wrapper {display: inline-block; max-width: 300rpx; }. Test {font-size: 32rpx; line-height: 32rpx; color: #2C2C2C; position: relative; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 14px; } .icon { position: absolute; right: 0; top: 11rpx; width:10px; height:10px; background: red; }Copy the code

5. Write at the end

As a front-end, CSS is a basic skill, to be solid.

If there is a mistake, please leave a message, will be corrected in time! If feel helpful to you, please click a like or collect it!