CSS文字编辑实用方法

• 段落文字缩进2个汉字：

div{
    text-indent: 2em;
}

• 单行文字垂直水平都居中:

div{
	border: 1px solid black;
	text-align: center;
	height: 20px;
	line-height: 20px;/*这个数值要和height值一样*/
}

• 中划线效果（不用del标签）：

div{
	text-align: left;
	line-height: 20px;
	text-decoration: line-through;
}

• 下划线：

div{
	text-align: left;
	line-height: 20px;
	text-decoration: underline;
}

• 单行文本超出容器宽度点点点显示：

p{
	width: 300px;
	height: 20px;
	line-height: 20px;
	border: 1px solid black;

    /*已下是点点点显示三件套*/
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

• 在div中添加背景图片

div{
	width: 500px;
	height: 500px;
	border: 1px solid red;
	background-image: url(wh.jpg);
	background-size: 100px 50px;
	background-repeat: no-repeat;
	background-position: left center;
}

• 浏览器才有默认加载策略，浏览器还能使用（在网速不好的时候不加载css和js情况）：

方法一：文字移出图片外隐藏显示。

a{
	text-decoration: none;
	display: inline-block;
	color: #424242;
	width: 190px;
	height: 140px;
	border: 1px solid black;
	background-image: url(https://gw.alicdn.com/tfs/TB1dYlEs9zqK1RjSZPxXXc4tVXa-190-140.gif);
	background-size: 190px 140px;

	/*将文字移出图片*/
	text-indent: 190px;
	white-space: nowrap;
	overflow: hidden;
}

方法二：容器height高度变为0，增加padding尺寸来填充背景图片，不能显示文字的特性达到效果。

a{
	text-decoration: none;
	display: inline-block;
	color: #424242;
	width: 190px;

	height: 0;
	padding-top: 140px;
	overflow: hidden;

	border: 1px solid black;
	background-image: url(https://gw.alicdn.com/tfs/TB1dYlEs9zqK1RjSZPxXXc4tVXa-190-140.gif);
	background-size: 190px 140px;
	
}