wjs-web-application/css-utils/01-text.css at main · wjs-tech/wjs-web-application · GitHub

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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
@charset "UTF-8";

/*
  ============================================================
  01-text.css - 文本工具类

  功能说明：
    1. 文本省略：单行、两行、三行文本溢出省略
    2. 文本对齐：左对齐、居中、右对齐、两端对齐
    3. 文本换行：不换行、正常换行、强制换行
    4. 文本大小写：大写、小写、首字母大写
    5. 文本装饰：下划线、删除线、无装饰
    6. 字重：细体、常规、中等、粗体
    7. 字号：超小、小号、基准、大号、超大、特大

  适用场景：
    - 文本内容排版与样式调整
    - 列表、卡片、表格中的文本展示
    - 响应式布局下的文本适配

  技术要点：
    - 使用 -webkit-line-clamp 实现多行文本省略
    - 统一使用短横线命名法（kebab-case）
    - 字号采用相对单位，便于响应式调整

  wjs created by 2015-05-10
  ============================================================
*/

/* ========== 文本省略 ========== */

/* 单行文本溢出省略 */
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 两行文本溢出省略 */
.text-ellipsis-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 三行文本溢出省略 */
.text-ellipsis-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ========== 文本对齐 ========== */

/* 左对齐 */
.text-left {
  text-align: left;
}

/* 居中对齐 */
.text-center {
  text-align: center;
}

/* 右对齐 */
.text-right {
  text-align: right;
}

/* 两端对齐 */
.text-justify {
  text-align: justify;
}

/* ========== 文本换行 ========== */

/* 不换行 */
.text-nowrap {
  white-space: nowrap;
}

/* 正常换行 */
.text-wrap {
  white-space: normal;
  word-wrap: normal;
}

/* 强制换行（长单词/URL换行） */
.text-break {
  word-wrap: break-word;
  word-break: break-all;
}

/* ========== 文本大小写 ========== */

/* 大写 */
.text-uppercase {
  text-transform: uppercase;
}

/* 小写 */
.text-lowercase {
  text-transform: lowercase;
}

/* 首字母大写 */
.text-capitalize {
  text-transform: capitalize;
}

/* ========== 文本装饰 ========== */

/* 下划线 */
.text-underline {
  text-decoration: underline;
}

/* 删除线 */
.text-line-through {
  text-decoration: line-through;
}

/* 无装饰 */
.text-no-decoration {
  text-decoration: none;
}

/* ========== 字重 ========== */

/* 细体 */
.font-light {
  font-weight: 300;
}

/* 常规 */
.font-normal {
  font-weight: 400;
}

/* 中等 */
.font-medium {
  font-weight: 500;
}

/* 粗体 */
.font-bold {
  font-weight: 700;
}

/* ========== 字号 ========== */

/* 超小字号 12px */
.text-xs {
  font-size: 0.75rem;
}

/* 小号字号 14px */
.text-sm {
  font-size: 0.875rem;
}

/* 基准字号 16px */
.text-base {
  font-size: 1rem;
}

/* 大号字号 18px */
.text-lg {
  font-size: 1.125rem;
}

/* 超大字号 20px */
.text-xl {
  font-size: 1.25rem;
}

/* 特大字号 24px */
.text-2xl {
  font-size: 1.5rem;
}