还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。
No.内容链接1Openlayers 【入门教程】 - 【源代码+示例300+】 2Leaflet 【入门教程】 - 【源代码+图文示例 150+】 3Cesium 【入门教程】 - 【源代码+图文示例200+】 4MapboxGL【入门教程】 - 【源代码+图文示例150+】 5前端就业宝典 【面试题+详细答案 1000+】
文章目录
1. **字体相关属性**2. **文本颜色与装饰**3. **文本间距与缩进**4. **文本对齐**5. **行高与垂直对齐**6. **换行与溢出**7. **`text-transform`**：控制文本的大小写形式。8. **`text-shadow`**：给文本添加阴影效果。9. **`text-overflow`**：处理文本溢出内容的显示方式。10. **`tab-size`**：设置制表符（tab）的宽度。11. **`hyphens`**：控制文本自动断词换行功能。12. **`unicode-bidi`** 和 **`direction`**：用于设置双向文字（如阿拉伯语、希伯来语）的书写方向。
CSS文本属性主要用于控制网页文本的样式，包括字体、大小、颜色、间距、对齐方式、装饰线、换行、缩进等。以下是一些常见的CSS文本属性及其示例代码：
1. 字体相关属性
font-family：设置文本的字体系列。p {
font-family: 'Arial', sans-serif;
}
font-size：设置文本的大小。h1 {
font-size: 36px;
}
font-weight：设置文本的粗细。strong {
font-weight: bold;
}
font-style：设置文本的斜体样式。em {
font-style: italic;
}
font-variant：设置小型大写字母。p.smallcaps {
font-variant: small-caps;
}
font：简写属性，用于设置以上所有字体属性。h1 {
font: italic bold 36px 'Arial', sans-serif;
}
2. 文本颜色与装饰
color：设置文本的颜色。p {
color: red;
}
text-decoration：设置文本装饰，如下划线、删除线等。a {
text-decoration: none; /* 移除链接下划线 */
}
span.strike {
text-decoration: line-through; /* 添加删除线 */
}
3. 文本间距与缩进
letter-spacing：设置字符之间的间距。p.tight {
letter-spacing: -1px; /* 减小字符间距 */
}
word-spacing：设置单词之间的间距。p.wide {
word-spacing: 5px; /* 增大单词间距 */
}
text-indent：设置首行缩进。p {
text-indent: 2em; /* 首行缩进两字单位 */
}
4. 文本对齐
text-align：设置文本的水平对齐方式。.center-text {
text-align: center; /* 文本居中对齐 */
}
5. 行高与垂直对齐
line-height：设置行间距，也可以用来实现垂直居中。p {
line-height: 1.5; /* 行间距为字体大小的1.5倍 */
}
div.container {
height: 100px;
line-height: 100px; /* 当行高等于容器高度时，文本垂直居中 */
vertical-align: middle; /* 配合display: inline-block等实现垂直居中 */
}
6. 换行与溢出
white-space：控制空白符的处理和换行。pre {
white-space: pre-wrap; /* 保留空白符并自动换行 */
}
overflow-wrap（旧称word-wrap）：允许长单词或URL换行。p {
overflow-wrap: break-word; /* 长单词强制换行 */
}
7. text-transform：控制文本的大小写形式。
h1 {
text-transform: uppercase; /* 将文本转为全大写 */
}
button.lowercase {
text-transform: lowercase; /* 将文本转为全小写 */
}
p.capitalize {
text-transform: capitalize; /* 将每个单词的首字母转为大写 */
}
8. text-shadow：给文本添加阴影效果。
h1 {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 文本阴影，水平偏移2px，垂直偏移2px，模糊半径4px，阴影颜色半透明黑色 */
}
9. text-overflow：处理文本溢出内容的显示方式。
.ellipsis {
white-space: nowrap; /* 禁止换行 */
overflow: hidden; /* 隐藏超出容器的内容 */
text-overflow: ellipsis; /* 溢出部分以省略号（…）代替 */
}
10. tab-size：设置制表符（tab）的宽度。
pre {
tab-size: 4; /* 设置制表符宽度为4个空格 */
}
11. hyphens：控制文本自动断词换行功能。
.auto-hyphenate {
hyphens: auto; /* 允许文本在必要时自动插入软连字符进行断词换行 */
}
12. unicode-bidi 和 direction：用于设置双向文字（如阿拉伯语、希伯来语）的书写方向。
.rtl-text {
direction: rtl; /* 设置文本方向为从右到左 */
unicode-bidi: bidi-override; /* 强制文本从右到左显示 */
}
以上就是CSS中常用的文本属性及其示例代码，通过灵活运用这些属性，您可以根据需求精确地调整网页中文本的各种样式和表现。
精彩内容
您阅读本篇文章共花了：
发表评论