（6）HTML&&CSS笔记（文本）-优快云博客

本文链接：https://blog.youkuaiyun.com/xiaoma_666/article/details/97264818

1、font：
font-size：字体大小
单位：

px 像素（12px 为字体的最小字体）
% 百分比（相对于父级）
em 倍数（相对于父级）
rem 根倍数（相对于html根标签）

color：字体颜色
font-family：字体类型
font-weight：字体粗细

normal 正常字体
bold 加粗
100 瘦身细
200 - 500 正常
600以上都是加粗

font-style 字体风格

italic 倾斜
oblique 倾斜
normal 默认正常

font-variant ：small-caps 小型字体大写

line-height 行高
当高度与行高一样的情况下，文本居中；
行高与高度的区别：
高度是元素的高度
行高是字体的高度

font复合写法
font-size font-family;
font-size/line-height font-family;
font-style font-weight font-variant font-size/line-height font-family;

2、text
text-align：水平对齐方式

left 左对齐（默认）
center 居中
right 右对齐
justify 两端对齐

text-indent 首项缩进
text-decoration 样式修饰

underline 下划线
none 去除修饰符
line-through 中线
overline 上划线

letter-spacing 字（字母）间距
word-spacing 词（单词）间距
white-space：是否换行

nowrap 不换行
wrap 换行（默认）

word-break：break-all；强行换行

3、文本溢出处理
white-space:nowrap;
overflow:hidden; 溢出处理：隐藏
text-overflow:ellipsis; 文本溢出处理：以省略形式显示

4、文本溢出处理（多行处理）
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box; 盒子模型
-webkit-box-orient:vertical; 对齐方式（垂直）
-webkit-line-clamp:3; 出现的行数！

<!doctype html>
<html>
	<head lang="en">
		<meta charset="utf-8" />
		<title>templet</title>
		<meta name="Keywords" content="" />
		<meta name="Description" content="" />
		<style type="text/css">
			*{margin:0;padding:0;}
			p{
				width:500px;
				/* height:100px; */
				background-color:#FF0;
				margin-bottom:20px;
				/* 	white-space:nowrap;
				overflow:hidden;
				text-overflow:ellipsis; */
				overflow:hidden;
			    text-overflow:ellipsis;
				display:-webkit-box;
				-webkit-box-orient:vertical;
				-webkit-line-clamp:3; 
			}	
		</style>
	</head>
	<body>
		<p class='p1'><span>卢本伟</span> ,1993年8月11日出生于香港，前皇族电子竞技俱乐部英雄联盟分部中单，在获得S3全球决赛亚军后退役。曾获2011TGA成都区冠军2011TGA总决赛冠军2011W C G中国区冠军、2013S3全球总决赛中国区冠军、2013S3全球总决赛亚军等荣誉。</p>
	</body>
</html>