8.文字溢出、背景图片处理

/* 溢出容器，要打点展示
1.单行文本
2.多行文本
由于电脑浏览器老版本问题，技术难以实现，手打
故只做截断 */

/* 单行溢出打点 /
/
p{
width: 300px;
height: 200px;
line-height: 20px;
border: 1px solid black;

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

/* 多行截断 */
p {
width: 300px;
height: 40px;
line-height: 20px;
line-height是行高一半表示多少行
border: 1px solid black;
overflow: hidden;
}

/* 背景图片 /
div {
background-image: url();
background-size: 200px 200px;
background-repeat: no-repeat;
background-position: center center;
/ center center 等于 50% 50% */
}

/*
背景图片：代替文字，文字也可但效果没那么好
img：展示文字中展示不了的效果
*/

/* 图片代替文字 /
a {
display: inline-block;
text-decoration: none;
color: #424242;
width: 190px;
height: 90px;
border: 1px solid black;
background-image: url();
background-size: 190px 90px;
/ 1.老办法
text-indent: 200px;
white-space: nowrap;
overflow: hidden; /
/ 2.背景颜色可加到padding上
背景图片也可以 */
height: 0px;
padding-top: 90px;
overflow: hidden;
两个方法都可以
}

/* 行级元素只能嵌套行级元素
块级元素可以嵌套任何元素
可这理解：行级元素本来就小，不能再套
1.p标签里不能套div
否则p会被截断为两个
2.a里面不能套a
*/