在開發網頁過程中,經常會遇到的問題是當段落太長的時候,應該用哪種換行效果?以下是一個簡單的 HTML 檔案可以讓開發者快速檢視換行效果,要使用該效果只需把相應的 CSS 應用至段落元素上即可。
.c1{ width:300px; border:1px solid red}
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
This is all English. This is all English. This is all English.
全是中文的情況。全是中文的情況。全是中文的情況。
中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.
.c2{ width:300px;word-wrap:break-word; border:1px solid yellow}
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
This is all English. This is all English. This is all English.
全是中文的情況。全是中文的情況。全是中文的情況。
中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.
.c3{ width:300px;word-wrap:break-word;word-break:break-all; border:1px solid green}
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
This is all English. This is all English. This is all English.
全是中文的情況。全是中文的情況。全是中文的情況。
中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.
.c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
This is all English. This is all English. This is all English.
全是中文的情況。全是中文的情況。全是中文的情況。
中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.
.c5{ width:300px;word-break:break-all; border:1px solid black}
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
This is all English. This is all English. This is all English.
全是中文的情況。全是中文的情況。全是中文的情況。
中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.
.c6{ width:300px;word-break:keep-all; border:1px solid red}
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
This is all English. This is all English. This is all English.
全是中文的情況。全是中文的情況。全是中文的情況。
中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.
.c7{ width:300px;word-wrap:break-word;overflow:auto; border:1px solid yellow}
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
This is all English. This is all English. This is all English.
全是中文的情況。全是中文的情況。全是中文的情況。
中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.
1
2
3
4
5
6
7
8
9
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
<
html
>
<
head
>
<
title
>自動換行 CSS 例子</
title
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=UTF-8"
/>
<
style
>
.c1{ width:200px; border:1px solid red}
.c2{ width:200px;word-wrap:break-word; border:1px solid yellow}
.c3{ width:200px;word-wrap:break-word;word-break:break-all; border:1px solid green}
.c4{ width:200px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}
.c5{ width:200px;word-break:break-all; border:1px solid black}
.c6{ width:200px;word-break:keep-all; border:1px solid red}
.c7{ width:200px;word-wrap:break-word;overflow:auto; border:1px solid yellow}
</
style
>
</
head
>
<
body
>
.c1{ width:300px; border:1px solid red}
<
div
class
=
"c1"
>
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</
div
>
<
div
class
=
c1
>
This is all English. This is all English. This is all English.
</
div
>
<
div
class
=
c1
>
全是中文的情況。全是中文的情況。全是中文的情況。
</
div
>
<
div
class
=
c1
>
中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.
</
div
>
<
br
>
.c2{ width:300px;word-wrap:break-word; border:1px solid yellow}
<
div
class
=
"c2"
>
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</
div
>
<
div
class
=
c2
>
This is all English. This is all English. This is all English.
</
div
>
<
div
class
=
c2
>
全是中文的情況。全是中文的情況。全是中文的情況。
</
div
>
<
div
class
=
c2
>
中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.
</
div
>
<
br
>
.c3{ width:300px;word-wrap:break-word;word-break:break-all; border:1px solid green}
<
div
class
=
"c3"
>
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</
div
>
<
div
class
=
c3
>
This is all English. This is all English. This is all English.
</
div
>
<
div
class
=
c3
>
全是中文的情況。全是中文的情況。全是中文的情況。
</
div
>
<
div
class
=
c3
>
中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.
</
div
>
<
br
>
.c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}
<
div
class
=
"c4"
>
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</
div
>
<
div
class
=
c4
>
This is all English. This is all English. This is all English.
</
div
>
<
div
class
=
c4
>
全是中文的情況。全是中文的情況。全是中文的情況。
</
div
>
<
div
class
=
c4
>
中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.
</
div
>
<
br
>
.c5{ width:300px;word-break:break-all; border:1px solid black}
<
div
class
=
"c5"
>
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</
div
>
<
div
class
=
c5
>
This is all English. This is all English. This is all English.
</
div
>
<
div
class
=
c5
>
全是中文的情況。全是中文的情況。全是中文的情況。
</
div
>
<
div
class
=
c5
>
中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.
</
div
>
<
br
>
.c6{ width:300px;word-break:keep-all; border:1px solid red}
<
div
class
=
"c6"
>
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</
div
>
<
div
class
=
c6
>
This is all English. This is all English. This is all English.
</
div
>
<
div
class
=
c6
>
全是中文的情況。全是中文的情況。全是中文的情況。
</
div
>
<
div
class
=
c6
>
中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.
</
div
>
<
br
>
.c7{ width:300px;word-wrap:break-word;overflow:auto; border:1px solid yellow}
<
div
class
=
"c7"
>
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</
div
>
<
div
class
=
c7
>
This is all English. This is all English. This is all English.
</
div
>
<
div
class
=
c7
>
全是中文的情況。全是中文的情況。全是中文的情況。
</
div
>
<
div
class
=
c7
>
中英文混排的情況。Chinese and English. 中英文混排的情況。Chinese and English.
</
div
>
</
body
>
</
html
>
|