css文本补充
css2
属性 | 描述 | 属性值 |
---|---|---|
color | 设置文本颜色 | rgb HEX rgba |
direction | 设置文本方向。 | ltr(左->右) rtl(右->左) |
letter-spacing | 设置字符间距 | px |
line-height | 设置行高 | px |
text-align | 对齐元素中的文本 | left center right justify (两端对齐) |
text-decoration | 向文本添加修饰 text-decoration: underline wavy red; 红色波浪下划线 wavy 波浪线 | none (默认 无效果) underline (下划线) overline(上划线) line-through ( 删除线) |
text-indent | 缩进元素中文本的首行 | em px |
text-transform | 控制元素中的字母 | capitalize 每个单词首字母大写 uppercase 全部大写 lowercase 全部小写 |
vertical-align | 设置元素的垂直对齐 | baseline 基线 默认 middle 中线 super 文本上标 sub 文本下标 top 顶端对齐最高元素顶端 text-top 元素顶端与父元素字体顶端 bottom 底端与最低元素底端 text-bottom 底端与父元素字体底端 |
white-space | 设置元素中空白的处理方式(主要控制换行) | normal 默认 忽略空白 pre 保留空白 nowrap 文本不换行 pre-wrap 保留空白 正常换行 pre-line 合并空白 保留换行符 |
word-spacing | 设置字间距 | px em |
css3
属性 | 描述 | 属性值 |
---|---|---|
text-align-last | 设置如何对齐最后一行或紧挨着强制换行符之前的行。 | left right justify center |
text-overflow | 规定当文本溢出包含元素时发生的事情。 | clip 剪裁 ellipsis 省略号 |
text-shadow | 向文本添加阴影。text-shadow: h-shadow v-shadow blur color; | h-shadow 水平偏移 v-shadow 垂直偏移 blur 阴影模糊值 color 颜色 |
word-break | 规定非中日韩文本的换行规则。 | break-all 单词内换行 keep-all 只能在半角空格或连字符处换行 |
word-wrap | 允许对长的不可分割的单词进行分割并换行到下一行。 | normal 单词内不换行 break-word 单词内可换行 |
单行文本展示省略号
.text {
width: 200px;
text-overflow: ellipsis; /*超出部分省略号*/
overflow: hidden; /*内容超出宽度隐藏*/
white-space: nowrap; /*文本不换行显示*/
}