开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第22天,点击查看活动详情
一、设置文本颜色
color : value
属性值可以为颜色名称、十六进制、rgb、rgba
二、设置文本对齐方式
text-align: left | right | center | justify
// left 左对齐
// right 右对齐
// center 居中对齐
// justify 两端对齐
三、设置文字左右方向
direction: ltr | rtl
// ltr 从左到右
// rtl 从右到左
四、设置文字间距
letter-spacing: value
接受px、rem等css中合法的尺度单位。
五、设置文本行高
line-height: value
接受的数值包括:数字、尺寸单位、百分比
line-height : 2; // 指定为当前字号大小的两倍高度
line-height : 30px; // 指定具体尺寸高度
line-height : 50%; // 指定根据当前字号的百分比作为高度
六、设置文本修饰线
text-decoration: underline | overline | line-through | none
// underline 下划线
// overline 上划线
// line-through 删除线
// none 移除文本修饰线
七、设置文本首行缩进
text-indent: value
- 接受px、rem等尺度单位。
- 接受百分比,以父容器宽度为基础指定百分比。
八、设置文本阴影
text-shadow: h-shadow v-shadow blur color
// h-shadow 水平阴影位置,水平位置若是正数,则向右偏移,反之向左。
// v-shadow 垂直阴影位置,垂直位置若是整数,则线下偏移,反之向下。
// blur 模糊距离
// color 阴影颜色
九、设置文字字母中的大小写
text-transform: capitalize | uppercase | lowercase
// capitalize 文本每个单词字母大写
// uppercase 文本全大写
// lowercase 文本全小写
十、设置文本垂直对齐方式
vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom
// baseline 默认值。元素放置在父元素的基线上。
// sub 垂直对齐文本的下标。
// super 垂直对齐文本的上标
// top 把元素的顶端与行中最高元素的顶端对齐
// text-top 把元素的顶端与父元素字体的顶端对齐
// middle 把此元素放置在父元素的中部
// bottom 把元素的顶端与行中最低的元素的顶端对齐。
// text-bottom 把元素的底端与父元素字体的底端对齐。
// % 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
十一、设置文本处理空白
指定元素内的空白怎样处理,一般只用来设置是否换行
white-space : normal | pre |nowrap |pre-wrap | pre-line |inherit
// normal 默认。空白会被浏览器忽賂。
// pre 空白会被浏览器保留。其行为方式类似 HTML 中的spre>标签。
// nowrap 文本不会统行,文本会在在同一行上继续,直到遇到 <br>标签为止。
// pre-wrap 保留空白符序列,但是正常地进行换行。
// pre-line 合并空白符序列,但是保留续行符。
// inherit 规定应该从父元表继承white-space 厲性的值。
十二、设置字间距
英文:
word-spacing: value
中英文:
letter-spacing: value
接受px、rem等尺寸单位
十三、设置长英文单词是否换行
word-wrap: normal | break-word;
// normal 值为保持浏览器默认处理
// break-word 为长单词剩余空间不足则换行处理
十四、设置文本溢出如何处理
text-overflow: clip | ellipsis
// clip 裁剪文字
// ellipsis 省略号代替溢出文本
除了这两种属性值外,可以填入字符串,表示用该字符串代替溢出文本。
十五、控制英文和数字在换行的断点处
文本换行时,如果剩余的空间不够放一个单词,那这个单词将会整体到第二行去,我们可以控制这样的换行断点
word-break: normal | break-all | keep-all;
// normal 正常的换行,整体移到第二行
// break-all 将在单词内进行折行
// keep-all 只在半角空格或连字符处进行换行