在项目中经常会用到一些很实用的css代码(*只做功能性记录,不追根究底,如有不合理的欢迎指正)
css图片上下居中
/*图片上下居中代码*/
.imgvam {
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle; /*设置水平居中*/
text-align:center; /* 针对IE的Hack */
*display: block;
/**font-size:175px;约为高度的0.873,200*0.873 约为175*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/
/*height:200px;*/
}
.imgvam img {
/*设置图片垂直居中*/
vertical-align:middle;
}
不够位置显示以省略号显示(只支持一行)
.eli {
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
其中overflow:hidden;为溢出隐,white-space:nowrap;为强制不换行,text-overflow:ellipsis;显示省略符号来代表被修剪的文本
效果:
时间不等你,做你想做的事。时间不等你,做你想做的事。时间不等你,做你想做的事。时间不等你,做你想做的事。
上面有用到强制不换行,在这里就把强制换行也记录下
word-wrap:break-word;
效果:
eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee I will be disappointed when complain is not good enough for my life not like the movie plot twists and turns 我也会有失望的时候 抱怨生活对我不够好 不能像电影一样 情节曲折结局依旧
另外还有个更霸道的,用它可能会截断英文单词,影响阅读(在这里"good"被截断了)
word-break: break-all;
效果:
eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee I will be disappointed when complain is not good enough for my life not like the movie plot twists and turns 我也会有失望的时候 抱怨生活对我不够好 不能像电影一样 情节曲折结局依旧
说到控制文本还有一个很实用的东西,文字左右对齐
text-justify:inter-ideograph;
text-align:justify;
效果:
I will be disappointed when complain is not good enough for my life not like the movie plot twists and turns 我也会有失望的时候 抱怨生活对我不够好 不能像电影一样 情节曲折结局依旧
背景透明,文字不透明,兼容IE
.test {
background:rgba(0,0,0,0.2);/*非IE8及IE8以下*/
}
@media \0screen\,screen\9 {
/*IE8及IE8以下*/
.test {
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
}
}
另外rgba 和IE下filter数值的转换rgba 透明值 IE filter值
0.1 19
0.2 33
0.3 4C
0.4 66
0.5 7F
0.6 99
0.7 B2
0.8 C8
0.9 E5
转换公式:alpha*255再转换成16进制即可
(经测试可用 嗯~ 感谢强大的网友)
待续……