一、text-align（文本水平对齐）
- left：左对齐
- right：右对齐
- center：居中对齐
- justify：两端对齐
二、vertical-align（垂直对齐）
- baseline：默认值，基线对齐
- top：顶端对齐
- bottom：底部对齐
- middle：居中对齐
- 使用数字进行设置
三、text-decoration（文本修饰）
- none：什么都没有
- underline：下划线
- line-through：删除线
- overline：上划线
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文本样式</title> <style> .box1{ width: 400px; height: 150px; border: 1px solid rgba(105, 148, 150, 0.623); /* 文本水平对齐 */ /* text-align: left; */ /* text-align: center; */ text-align: justify; /* text-align: right; */ /* 文本垂直对齐 */ /* vertical-align: bottom; */ /* vertical-align: top; */ /* vertical-align: baseline; */ /* vertical-align: middle; */ vertical-align: 100px; /* text-decoration（文本修饰） */ /* text-decoration: underline; */ /* text-decoration: overline; */ text-decoration: line-through; /* 兼容性不好 */ } </style> </head> <body> <div class="box1"> <p>I don't think that when people grow, I think it's a selecting process, knowing what's the most important and what's the least. And then be a simple man.</p> </div> </body> </html>
四、white-space（网页空白处理）
- normal：正常
- nowrap：不换行
- pre：保留空白
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>使用text-overflow截断超长文字显示技巧</title> <style> .box2{ width: 200px; /* 不换行显示 */ white-space: nowrap; /* 裁剪隐藏 */ overflow: hidden; /* 文本的裁剪 text-overflow: ellipsis; 裁剪后出现省略号 */ text-overflow: ellipsis; } </style> </head> <body> <div class="box2"> 人生有三境：第一镜为“昨夜西风凋碧树”。 第二境为“衣带渐宽终不悔，为伊消得人憔悴”。 第三境为“众里寻她千百度，蓦然回首，那人正在，灯火阑珊处”。 </div> </body> </html>