前端-html，css文本文字属性

最新推荐文章于 2024-04-30 19:38:51 发布

敦煌璧画

最新推荐文章于 2024-04-30 19:38:51 发布

阅读量163

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_58200396/article/details/121172101

版权

06-文本文字属性

水平对齐方式 text-align

left 居左对齐

center 居中对齐

right 局右对齐
首行缩进 text-indent

带单位的长度值，常用px em
大小写 text-transform

none 默认值

uppercase 全部转化大写

lowercase 全部转化小写

capitalize 首字母转换为大写
文本线 text-decoration

none 没有文本线

underline 下划线

line-through 中划线

overline 上划线
字间距 letter-spacing

每一个字符之间的间隙
词间距 word-spacing

单词之间的间隙
换行方式 white-space

normal 默认值，正常换行

nowrap 文本不换行
长单词换行方式 word-break

normal 默认值，使用浏览器默认的换行方式

break-all 允许在单词内换行

keep-all 只能在半角空格或连字符处换行。
溢出显示方式 text-overflow

当盒子规定了超出隐藏后：

clip 默认，裁剪文本

ellipsis 显示省略符号来代表被修剪的文本

垂直对齐 vertical-align

vertical-align该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。取值如下：

值	解释
baseline	默认。元素的基线与父元素的基线对齐
top	元素的顶端与一行中最高元素的顶边对齐
middle	元素的中垂点与父元素的基线加1/2父元素中小写字母x的高度对齐
bottom	把元素的底端与一行中最高元素的底边对齐
text-top	元素的顶端与父元素字体的顶端对齐
text-bottom	把元素的底端与父元素字体的底端对齐

只针对inline、inline-block、图片或表格有效；

top、middle、bottom和line-height有关，baseline、text-top、text-bottom和font-size有关；

大部分的文本文字属性都会继承，而盒子本身的宽高边距边框等属性则不会继承。

eg：

<style>
    /*span能够继承父级p的文字颜色，所以span显示的文字颜色也是red*/
    p{color: red;}
</style>
<p><span>span文字</span></p>

<style>
    /*p标签并不会继承div的padding*/
    div{padding:20px;}
</style>
<div><p></p></div>

关注