A summary of the use techniques of CSS in micro-message applet

This article introduces the recent very hot small program CSS Use tips Summary, the need for students can refer to this article

Tips for using small program CSS

1: The principle of creating a triangle with pure css to hide the top, left, and right three edges (color set to transparent)

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

2: Set maximum height. can slide after exceeding

MAX-HEIGHT:550RPX; Overflow-y:scroll;

3:text-overflow When an attribute specifies what happens when the text overflows the containing element

Clip: Trimming Text Ellipsis: Use ellipses to represent trimmed text String: Uses the given string to represent the trimmed text The focus is three simultaneous use: Text-overflow:ellipsis;white-space:nowrap;overflow:hidden;

4:overflow:hidden when forcing non-wrapping, use Overflow:hidden to hide parts beyond the interface

5:margin-bottom failure

Margin-bottom is the bottom margin, and can not move the element downward, margin-top as the top margin, the element "pushed" down. Hope the icon distance below 30px, then you can set position:absolute,bottom:30px on the UL, (this sentence I did not add the same effect) the other parent element position:relative

6: Force No Line break

White-space:nowrap;

Wrap Line

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

Force English words to break

p{Word-break:break-all;}