文字溢出处理 | | 背景图片处理

单行文本溢出处理：

/*单行文本溢出处理*/
p {
width:200px;
height:20px;
line-height:20px;
border:1px solid black;
/*下面三行是模板 */
white-space:nowrap;/*这句话是用来实现超过文本框后文集继续往后，而不是换行*/
overflow:hidden;/*溢出部分隐藏*/
text-overflow:ellipsis;/*超出的文本用点点点表示*/
}

多行文本溢出处理：

div {
    width:300px;
    height:40px;
    line-height:20px;
    border:1px solid black;
    overflow:hidden;
}

背景图片：

div {
background-image:url(ima.png);
border:1px solid black;
height:200px;
width:200px;
background-size:100px 100px;/*设置背景图片大小*/
background-repeat:no-repeat;/*这个是默认是repeat，默认是照片会重复出现把框框铺满*/
background-position:100px 100px;/*这个会让图片跑到（100，100）的位置 也可以写center top等这类*/
}

另外，每一个国际公司的网站都会考虑到如果网速不够，加载不出css和js，但是依旧可以点击网页中的链接，就可以这样来处理：

a {
    display: inline-block; /*因为a是行标签，不能控制宽高*/
    text-decoration: none;
    color: #424242;
    background-image: url(ima.png);
    background-size: 190px 90px;
    border: 1px solid black;
    width: 190px;
    height: 0; /*把边框的高度变成0，让padding 实现盒子的宽度，
                 这样盒子对于文字来说还是0高度，所以只能换行*/
    padding-top: 100px;
    overflow: hidden;/*将超出的文字隐藏起来*/
}

也可以：

a {
    display: inline-block; /*因为a是行级元素，不能控制宽高*/
    text-decoration: none;
    color: #424242;
    background-image: url(ima.png);
    background-size: 190px 90px;
    border: 1px solid black;
    width: 190px;
    padding-top: 100px;
    text-indent: 200px;
    white-space: nowrap; /*将文字水平铺*/
    overflow: hidden; /*将超出的文字隐藏起来*/
}

另外有一个知识点：

所有行级元素只能嵌套行级元素

块级元素只能嵌套块级元素，除了标签不行，比如：

<p><div></div></p>这样是不行的

文字溢出处理 | | 背景图片处理

猜你喜欢