Introduction 】
In the development, some code segments are used very frequently, or some are only used occasionally, but the attributes are difficult to remember, so here it makes a summary for easy reference.
Change the excess into

.
】

Code:
[CSS]

Plain text view
Copy the code

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
.line
1
{

width
:
100px
;

display
:
block
;

word-break: keep-
all
;

white-space
:
nowrap
;

overflow
:
hidden
;

text-
overflow
: ellipsis;

}

Effect:
【 beyond

3
Line showing ellipsis 】

[CSS]

Plain text view
Copy the code

?
01
02
03
04
05
06
07
08
09
10
11
12
13
.line
2
{

overflow
:
hidden
;

text-
overflow
: ellipsis;

display
: -webkit-box;

-webkit-line-clamp:
3
;

-webkit-box-orient: vertical;
}

Effect:
【 beautification

checkbox
.
radio
】

Css

code

[CSS]

Plain text view
Copy the code

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
label {

font-size
:
12px
;

cursor
:
pointer
;

}

label i {

font-size
:
12px
;

font-style
:
normal
;

display
: inline-
block
;

width
:
12px
;

height
:
12px
;

text-align
:
center
;

line-height
:
12px
;

color
:
#fff
;

vertical-align
:
middle
;

margin
:
-2px
2px
1px
0px
;

border
:
#2489c5
1px
solid
;

}

input[type=
"checkbox"
], input[type=
"radio"
] {

display
:
none
;

}

input[type=
"radio"
] + i {

border-radius:
7px
;

}

input[type=
"checkbox"
]:checked + i, input[type=
"radio"
]:checked + i {

background
:
#2489c5
;

}

input[type=
"checkbox"
]:disabled + i, input[type=
"radio"
]:disabled + i {

border-color
:
#ccc
;

}

input[type=
"checkbox"
]:checked:disabled + i, input[type=
"radio"
]:checked:disabled + i {

background
:
#ccc
;

}

Html

Code:

[HTML]

Plain text view
Copy the code

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
<
label
><
input
type
=
"checkbox"
><
i
< / a > ✓
i
> check box </
label
><
br
>
<
label
><
input
type
=
"checkbox"
checked><
i
< / a > ✓
i
> check box </
label
><
br
>
<
label
><
input
type
=
"checkbox"
disabled><
i
< / a > ✓
i
The > check box disables </
label
><
br
>
<
label
><
input
type
=
"checkbox"
disabled checked><
i
< / a > ✓
i
The > check box disables selected </
label
><
br
>
<
label
><
input
type
=
"radio"
name
=
"abc"
><
i
< / a > ✓
i
> Box </
label
><
br
>
<
label
><
input
type
=
"radio"
name
=
"abc"
checked><
i
< / a > ✓
i
> Box </
label
><
br
>
<
label
><
input
type
=
"radio"
name
=
"abc"
disabled><
i
< / a > ✓
i
> Box to disable </
label
><
br
>
<
label
><
input
type
=
"radio"
name
=
"def"
disabled checked><
i
< / a > ✓
i
> Box to disable the selected </
label
><
br
>

Effect:
[Clear float]
[CSS]

Plain text view
Copy the code

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
.clearfix:after,
.clearfix:before {

content
:
"."
;

display
:
block
;

clear
:
both
;

visibility
:
hidden
;

line-height
:
0
;

height
:
0
;
}
/* IE 6/7 */
.clearfix { zoom:
1
; }



For more technical advice: Gzitcast