【CSS】 text相关属性

最新推荐文章于 2025-06-13 22:10:55 发布

原创最新推荐文章于 2025-06-13 22:10:55 发布 · 2.3k 阅读

10 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css

CSS学习专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了CSS中的文本样式属性，包括水平对齐方式、段落最后一行对齐方式、首行缩进、文本修饰、修剪文字、文字阴影、大小写转换、换行处理等，并附带了具体的使用示例。

A. text-align：水平对齐方式

属性值：left/right/center/justify(两端对齐)
CSS direction属性简介与实际应用
text-align-last：段落最后一行对齐方式

p {
    text-align: justify;
    text-align-last: right; /*只有IE有效,*/
    -moz-text-align-last: right; /* 针对 Firefox 的代码 */
}

text-justify：改变字与字之间的间距使得每行对齐(是否就ie支持？具体属性值，自行了解)
vertical-align：设置一个元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

B. text-indent ：首行缩进

属性规定文本块中首行文本的缩进。
注意：负值是允许的。如果值是负数，将第一行左缩进。

C. text-decoration

text-decoration 属性规定添加到文本的修饰，下划线、上划线、删除线等（上划线、下划线、删除线可以同时存在哦）。
text-decoration 属性是以下三种属性的简写：

h1.under {
    text-decoration: underline wavy red;
}
h1.over {
    text-decoration: overline red;
}
p.line {
    text-decoration: line-through;
}
p.blink {
    text-decoration: blink;
}
a.none {
    text-decoration: none;
}
p.underover {
    text-decoration: underline overline;
}

D. text-overflow：修剪文字

E. text-shadow : 基本文字阴影

h1 {
    text-shadow: 2px 2px #ff0000;
}

F. text-transform：大小写

h1 {text-transform:uppercase;}
h2 {text-transform:capitalize;}
p {text-transform:lowercase;}

G. text-wrap：换行，主流浏览器支持否？

自行验证哦!!!

H. text-outline：轮廓，主流浏览器支持否？

自行验证哦!!!

p.test {
    text-outline: 2px 2px #ff0000;
}

I. word相关的属性这里顺便也一起学下吧

word-break：在合适的点换行

word-spacing：指定段字之间的空间

p {
    word-spacing:30px;
}

word-wrap：指定如果足够长得话，应该换行

J. white-space

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