css文本设置主要的属性有：font-famil、font-size、color、text-align、text-decoration、border、text-shadow、Word-warp、Word-break、direction等等。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
css文本各种属性集合
1、字体属性
font-family：‘微软雅黑’ 指定字体Css属性设置样式
立即学习“前端免费学习笔记（深入）”；
font-size：设置字体大小。
font-weight：设置文本的粗细
font-style:设置字体倾斜，可能的属性有normal、italic、oblique;
line-height:设置字体的行间距;
color 字体颜色
2、文本属性
text-align:控制文本的对齐方式
text-indent :控制文本首行的缩进，px或%都可；
white-space:文档中的空白处
属性值：
noraml: 默认忽略多个空格,只输出一个空格 .
nowrap: 强制不换行
pre:空格/缩进/换行 会给保留
pre-line:合并空表(多个空格只会输出一个空格)
pre-warp:保留空白/缩进,正常换行 ;
letter-spacing:控制字母之间的距离；
text-overflow:当文本溢出包含元素时发生的事情；
属性值：
clip 修剪文本。
ellipsis 显示省略符号来代表被修剪的文本。
string 使用给定的字符串来代表被修剪的文本。
word-spacing :控制单词间空格的距离，以空格来区分单词，中英都OK；
3、下划线属性
text-decoration :控制文本是否有下划线，可能值有
none 没有下划线
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
underline 定义文本下的一条线。
4、转换大小写
text-transform:
属性值：
none(默认) 无转换;
capitalize:每个单词第一个字母为大写;
upercase :转换成大写;
lowercase:转换成小写;
【推荐教程：CSS视频教程】
5、边框属性
border简写属性，用于把针对四个边的属性设置在一个声明。border-style用于设置元素所有边框的样式，或者单独地为各边设置边框样式。border-width简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。border-color简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。border-bottom简写属性，用于把下边框的所有属性设置到一个声明中。border-bottom-color设置元素的下边框的颜色。border-bottom-style设置元素的下边框的样式。border-bottom-width设置元素的下边框的宽度。border-left简写属性，用于把左边框的所有属性设置到一个声明中。border-left-color设置元素的左边框的颜色。border-left-style设置元素的左边框的样式。border-left-width设置元素的左边框的宽度。border-right简写属性，用于把右边框的所有属性设置到一个声明中。border-right-color设置元素的右边框的颜色。border-right-style设置元素的右边框的样式。border-right-width设置元素的右边框的宽度。border-top简写属性，用于把上边框的所有属性设置到一个声明中。border-top-color设置元素的上边框的颜色。border-top-style设置元素的上边框的样式。border-top-width设置元素的上边框的宽度。
6、盒子阴影
box-shadow:盒子阴影;
可以有五个值 (h-shadow水平阴影位置,v-shadow垂直阴影位置,blur模糊距离,spread阴影尺寸, color， inset/outset内外阴影 )
eg:
box-shadow: 10px 5px 10px red inset;
7、文本超出换行
Word-warp:允许长单词转换到下一行
Word-break:允许在单词内转行(自动换行)
8、文字摆放形式
direction: 文字摆放方向
属性值：
ltl:从左往右
rtl:从右往左
9、文本超出换行
Word-warp:允许长单词转换到下一行
Word-break:允许在单词内转行(自动换行)
10、文字阴影
text-shadow:参考盒子阴影
11、文本单行超出显示省略号
{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
12、多行文本超出用省略号代替限制行数
{ overflow:hidden; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 3; /*限制在一个块元素显示的文本的行数*/ -webkit-box-orient: vertical; text-overflow:ellipsis;}
更多编程相关知识，请访问：编程视频！！
以上就是css文本设置主要有哪几项属性的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1618562.html
微信扫一扫 
支付宝扫一扫 
