CSS文本样式

97 阅读3分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 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 只在半角空格或连字符处进行换行