本文已参与「新人创作礼」活动,一起开启掘金创作之路。
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;
}
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;
5. text-overflow
/* 如何显示的溢出内容 */
6. white-spacing
/* word-spacing指的是字符“空格”的间隙。如果一段文字中没有空格,则该属性无效。*/
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;