css
ie 6、7下,div不能display:table;
绝对定位之后,宽度由内容撑开
1
white-space:unwrap //强制文本不换行
overflow:hidden //溢出隐藏
text-overflow:ellipsis //显示省略号
2
word-break:break-all //词内断行
3
word-wrap:break-word //单词溢出断行
4 css3
box-sizing:border-box //可视宽=设置宽 (内容宽=设置宽-padding-border)
box-sizing:content-box //可视宽=设置宽+padding+border
5 未知宽高的图片如何水平垂直居中
方法1:
div{text-align:center;}
span{display:inline-block;height:100%;vertical-align:middle;}
img{vertical-align:center;}
<div>
<img src="#" /><span></span>
</div>
方法2:
div{display:table;position:relative;overflow:hidden;}
span{display:table-cell;text-align:center;vertical-align:middle;*position:absolute;left:50%;top:50%;}
img{vertical-align:top;*position:relative;left:-50%;top:-50%;}
<div>
<span><img src="#" /></span>
</div>
6 li文字溢出
ul{margin:0;padding:0;list-style:none;width:302px;}
li{height:30px;font-size:12px;line-height:30px;border:1px solid black;overflow:hidden;}
p{margin:0;float:left;padding-right:50px;position:relative;}
span{padding-left:10px;width:40px;position:absolute;right:0;top:0;}
<ul>
<li>
<p>
<a href="#">文字文字文字文字文字文字文字文字文字文字 </a>
<span>文字</span>
</p>
</li>
<ul>