Summary of css usage tips for WeChat applets

Source: Internet
Author: User
This article mainly introduces the relevant information about the tips for using small program css. For more information, see the tips for using small program css.

1: Create a triangle with pure CSS to hide the top, left, and right sides (set the color to transparent)

.demo { width: 0; height: 0; border-width: 20px; border-style: solid; border-color: transparent transparent red transparent; }

2: You can slide after setting the maximum height ..

max-height: 550rpx; overflow-y: scroll;

3: text-overflow what happens when the attribute specifies that text overflow contains elements

Clip: Trim text ellipsis: Use ellipsis to represent the trimmed text string: use a given string to represent the trimmed text. The key is three keys: text-overflow: ellipsis; white-space: nowrap; overflow: hidden;

4: overflow: hidden when force does not wrap, use overflow: hidden to hide parts beyond the interface

5: margin-bottom is invalid.

Margin-bottom is the bottom margin, which does not allow elements to move to the bottom. margin-top is used as the top margin to push the element down. If you want the icon to be 30 px away from the bottom, you can set position: absolute, bottom: 30px on ul (I didn't add the same effect for this sentence) and the parent element position: relative

6: force do not wrap


Automatic line feed

p{ word-wrap: break-word; word-break: normal; }

Force an English word to break a line

p{ word-break:break-all; }

Thank you for reading this article. I hope it will help you. thank you for your support for this site!

For more tips on small program css usage, please pay attention to the PHP Chinese website!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.