css3文本样式

文本阴影

ext-shadow：设置文本阴影

语法：text-shadow: h-shadow v-shadow blur color;

属性值

• h-shadow {number} ：必需。水平阴影的位置。允许负值
• v-shadow {number} : 必需。垂直阴影的位置。允许负值
• blur {number} ：可选。模糊的距离
• color {color} ：可选。阴影的颜色

h1{text-shadow: 5px 5px 5px #FF0000;}

文本自动换行

word-wrap：属性允许长单词或 URL 地址换行到下一行

语法： word-wrap: normal|break-word;

属性值

• normal ：只在允许的断字点换行（浏览器保持默认处理）
• break-word : 在长单词或 URL 地址内部进行换行

div{
    word-wrap:break-word;
}

单词拆分

word-break：属性规定自动换行的处理方法。

语法： word-break: normal|break-all|keep-all;

属性值

• normal ：使用浏览器默认的换行规则
• break-all : 允许在单词内换行。
• keep-all ：只能在半角空格或连字符处换行

div {
    word-break: break-all;
}

文本拆分

text-wrap ：属性规定文本的换行（折行）规则

语法：text-wrap: normal|none|unrestricted|suppress;

属性值

• normal ：只在允许的换行点进行换行
• none : 不换行。元素无法容纳的文本会溢出
• unrestricted ：在任意两个字符间换行
• suppress ：压缩元素中的换行。浏览器只在行中没有其他有效换行点时进行换

div {
    text-wrap:normal;
}

文本溢出

text-overflow ：属性规定当文本溢出包含元素时发生的事情

语法： text-overflow: clip|ellipsis|string;

属性值

• clip ：修剪文本
• ellipsis : 显示省略符号来代表被修剪的文本
• string ：使用给定的字符串来代表被修剪的文本

单行文本溢出

div {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

多行文本溢出

div {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}