1.如何使文本溢出边界不换行强制在一行中显示
test{
width: 50px;
white-space: nowrap;
}
2.如何清除浮动,两种方式。
a. #test{clear: both;} #test为浮动元素的下一个兄弟元素
b. #test{overflow: hidden; } #test为浮动元素的父容器的样式
3.如何去掉超链接点击后的虚化线
a{outline:none;}
注:ie7及更早的浏览器不支持该属性,需要通过js的blur()方法实现 ,如<a onfocus="this.blur();"
4.如何使连续的长字符串自动换行
.tset{
width: 120px;
word-wrap: break-word;
}
注:word-wrap的break-word值允许单词内换行、
5.如何限制文本描述的高度,超出文本边界显示为省略号
.desc1{
display: -webkit-box;
display:-moz-box;
display:-o-box;
display:-ms-box;
display:box;
overflow: hidden;
height:35px; //设置文本的高度
text-overflow: ellipsis; //当对象内文本溢出时显示省略标记...
white-space: normal!important;
word-wrap: break-word; // 内容将在边界内换行。如果需要,单词内部允许断行。
-webkit-box-orient: vertical; //属性规定框的子元素应该被垂直排列。
-webkit-line-clamp: 1; //块元素显示的文本的行数。
}
6.如何让单行文本在容器内垂直居中?
#test{height:25px;line-height:25px;} //只需设置文本的行高等于容器的高度即可
7.如何设置内联元素的宽高
span{display:block;width:200px;height:100px;}