上一篇
html中文字定位
HTML文字定位通过CSS实现，如text-align水平对齐，line-height垂直调整，vertical-align控制行内元素，position属性用于
文本对齐方式
| 属性 | 作用 | 示例效果 |
|---|---|---|
text-align | 水平对齐（左/右/居中/两端） | 整段文字居中：text-align:center |
vertical-align | 垂直对齐（针对行内元素） | 图片与文字顶部对齐：vertical-align:top |
justify | 两端对齐（自动调整间距） | 段落两端对齐：text-align:justify |
段落缩进与间距
| 属性 | 作用 | 示例 |
|---|---|---|
text-indent | 首行缩进 | text-indent:2em; |
line-height | 行高（影响垂直间距） | line-height:1.5; |
margin | 段落外围间距 | margin:10px 0; |
padding | 段落内边距 | padding:15px; |
行内文本控制
| 属性 | 作用 | 示例 |
|---|---|---|
letter-spacing | 字母间距 | letter-spacing:3px; |
word-spacing | 单词间距 | word-spacing:5px; |
text-transform | 文本大小写转换 | 全大写：text-transform:uppercase; |
text-decoration | 下划线/删除线等 | 去除链接下划线：text-decoration:none; |
特殊排版效果
| 方法 | 作用 | 示例 |
|---|---|---|
::first-letter | 首字母放大 | p::first-letter {font-size:2em;} |
white-space | 强制换行/不换行 | 强制换行：white-space:pre-wrap; |
text-shadow | 文字阴影 | text-shadow:2px 2px #ccc; |
display:inline-block | 行内元素转为块级 | 让<span>支持宽高设定 |
相关问题与解答
问题1：如何实现文字在容器内垂直居中？
解答：
- 单行文本：使用
line-height等于容器高度.container { height:50px; line-height:50px; } - 多行文本：使用
display:flex.container { display:flex; align-items:center; justify-content:center; }
问题2：中文段落出现异常换行怎么办？
解答：
- 强制英文单词不换行：
p { word-break:break-word; } / 允许在单词内换行 / - 保留中文标点完整性：
p { word-wrap:break-word; } / 旧写法兼容处理 /
