前端css文本属性合集
程序员文章站
2022-06-22 11:42:54
文本模块 缩进text-intent间距 xxx-spacing控制文本大小写 text-transform文本修饰 text-decoration水平对齐方式text-align垂直对齐方式vertical-align文本加粗 font-weight控制文本倾斜font-style文本换行处理解决input的border内嵌问题列表符号(不常用)缩进text-intent首行缩进:text-intent:2em;悬挂式缩进 text-intent:-999px;间距 xxx-spacing字间距...
文本模块
缩进text-intent
首行缩进:text-intent:2em;
悬挂式缩进 text-intent:-999px;
间距 xxx-spacing
字间距 letter-spacing
词间距word-spacing
控制文本大小写 text-transform
属性值:
capitalize 首字母大写
uppercase 大写
lowercase 小写
文本修饰 text-decoration
属性值:
none
underline 下划线
outline 上划线
line-through 划线穿过文本
水平对齐方式text-align
属性值:
left center right justify(两端对齐)
垂直对齐方式vertical-align
(不只限于文本)
top 顶对齐 middle 居中对齐 bottom 底对齐 baseline基线对齐
文本加粗 font-weight
属性值:
normal bold bolder 100-900
控制文本倾斜font-style
属性值:
normal italic oblique
文本换行处理
- 默认执行逻辑:对于长单词,如果超出,首先尝试把长单词放到下一行显示,如果下一行仍有超出则不做处理。
- word-wrap:break-word;执行逻辑:对于长单词,如果超出,尝试把它放到下一行,如果下一行仍有超出,把超出部分放到下一行。
- word-break:break-all;(粗暴断句)执行逻辑:不会考虑把长单词换到下一行,而是直接在单词内部断句。
解决input的border内嵌问题
input的border是长在input内部的,因此在给input设置border时,一般在input外面套一个div,把div的border作为input的属性来用。
列表符号(不常用)
控制列表符号list-style-type:;disc circle none …
把图片当作列表符号list-style-image:url();
图片的位置 list-style-position 属性值 inside outside
一般选择去掉列表符号:
list-style:none;
本文地址:https://blog.csdn.net/qq_42698576/article/details/107545740