最浅显易懂的 CSS 之文本 - 02

224 阅读2分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

1. text-shadow

/* 文字添加阴影 */
/* 每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成。颜色可放第一位和最后一位。 */
text-shadow: 1px 1px 2px black;		
          /* 必选 必选 可选 可选 */
/* offset-x | offset-y | blur-radius | color */
h1{ 
    text-shadow: 2px 2px 9px black;
    font: 100px/200px "微软雅黑"; 
    color: white;
    text-align: center; 
}

image.png

2. text-decoration

/* 设置文本的修饰线外观的(下划线、上划线、贯穿线/删除线或闪烁) */
- 是下列四个属性的缩写。
- text-decoration-line
    文本修饰的位置, 如下划线underline,删除线line-through
- text-decoration-color
    文本修饰的颜色
- text-decoration-style
    文本修饰的样式, 如波浪线wavy实线solid虚线dashed
- text-decoration-thickness
    文本修饰线的粗细

3. direction

/* 设置文本、表列水平溢出的方向 */
	- ltr	默认属性。可设置文本和其他元素的默认方向是从左到右。
	- rtl 	可设置文本和其他元素的默认方向是从右到左。
	- direction: ltr; || direction: rtl;

# 通常配合 unicode-bidi 一起使用
	direction:rtl;
	unicode-bidi:bidi-override;

4. text-align-last

/* 设置文本两端对齐 */
text-align-last: justify;

image.png

5. text-overflow

/* 如何显示的溢出内容 */

image.png

6. white-spacing

/* word-spacing指的是字符“空格”的间隙。如果一段文字中没有空格,则该属性无效。*/

image.png

7. white-space

/* 如果在html中输入多个空白符,默认会被当成一个空白符处理,实际上就是这个属性控制的 */
    normal:合并空白符和换行符;
    nowrap:合并空白符,但不许换行;
    pre:不合并空白符,并且只在有换行符的地方换行;
    pre-wrap:不合并空白符,允许换行符换行和文本自动换行;

8. 字体分栏

column-count	分栏数量
column-gap	每一列中间的距离
column-rule	分栏中间的

9. 单行省略号

p {
	white-space:nowrap; 	/* 不换行 */
	overflow:hidden; 	/* 超出隐藏 */
	text-overflow:ellipsis;  /* 省略号 */
}

10. 多行省略号

/* 设置文本、表列水平溢出的方向 */
	- ltr	默认属性。可设置文本和其他元素的默认方向是从左到右。
	- rtl 	可设置文本和其他元素的默认方向是从右到左。
	- direction: ltr; || direction: rtl;

# 通常配合 unicode-bidi 一起使用
	direction:rtl;
	unicode-bidi:bidi-override;