解决img标签与p标签之间有空隙的问题
1.将img设置为block: img{display:block}
- 设置img的竖直对其方式:vertical-align: bottom;
- 定义容器里的字体大小为0。
div{
width:110px;
border:1px solid #000000;
font-size:0px;
}
css实现图片元素水平垂直居中
样式//style .outer{ width: 500px; height: 200px; line-height: 200px; text-align: center; border: green solid 5px; } .inner{ display: inline-block; vertical-algin: middle; }
html
<div class='outer'> <img src="https://www.baidu.com/img/baidu_jgylogo3.gif"> </div>
.one {
position:absolute;
width200px;
height:200px;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
background:red;
}
.two{
position:fixed;
width:180px;
height:180px;
top:50%;
left:50%;
margin-top:-90px;
margin-left:-90px;
background:orange;
}
.three{
position:fixed; width:160px; height:160px; top:0; right:0; bottom:0; left:0; margin:auto; background:pink;
}
.four{ position:absolute; width:140px; height:140px; top:0; right:0; bottom:0; left:0; margin:auto; background:black;}
css实现单行、多行文本溢出显示省略号
单行文本的移除显示省略号用text-overflow:ellipsis属性,还需要加宽度width属性来兼容部分浏览器。
实现方法:
overflow:hidden;
white-spacen:nowrap;
text-overflow:ellipsis;
1.使用overflow:hidden把超出的内容进行隐藏;
- 然后使用white-space:nowrap设置内容不换行;
- 最后使用text-overflow:ellipsis设置超出内容为省略号
但是这个属性只支持单行文本的溢出显示省略号。
实现多行文本溢出显示省略号,如下。
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
overflow:hidden;
因为使用了webkit的css扩展属性,该方法适用于webkit浏览器及移动端;
注:
1.-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的webkit属性。常见结合属性:
- display:-webkit-box;必须结合的属性,将对象作为弹性伸缩盒子模型显示。
- -webkit-box-orient必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式。
实现方法:p{position:relative;line-height:20px;max-height:40px;overflow:hidden;} p::after{content:"...";position:absolute;bottom:0;right:0;padding-left:40px; background: line-gradient(to right,transparent,#fff 55%); background: -webkit-linear-gradient(left, transparent, #fff 55%); background: -o-linear-gradient(right, transparent, #fff 55%); background: -moz-linear-gradient(right, transparent, #fff 55%); }
该方法使用范围广,但文字未超出行的情况下也会出现省略号,可结合js优化该方法。
注:
1.将height设置为line-height的整倍数,防止超出的文字露出。 - 给p::after添加背景可避免文字只显示一半。
3.由于ie6-7不显示content内容,所以要添加标签兼容ie6-7(如:<span>…<span/>);兼容ie8需要将::after替换成:after
css3中的transform对行内元素(inline)无效,查资料后发现,transform适用于:所有块级元素及某些内联元素。
相关链接:http://www.css88.com/book/css/properties/transform/transform.htm
1 个评论
要回复文章请先登录或注册
菜鸡