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;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;40px;position:absolute;right:0;top:0;}

 

<ul>

    <li>

        <p>

            <a href="#">文字文字文字文字文字文字文字文字文字文字 </a>

            <span>文字</span>

        </p>

    </li>

<ul>