文字换行,文字省略号,无宽度大小居中显示,模拟固定高度

个人笔记

1、word-break:break-all;   换行

2、 white-space:nowrap; overflow:hidden; text-overflow:ellipsis;  省略号

3、固定高度1:html{height:100%;overflow:hidden;}
body{margin:0; height:100%;overflow:auto;}
.box{height:2000px;}
.div{width:100px;height:100px;background:red; position:absolute;left:100px;top:100px;}

<div class="box">
 <div class="div"></div>
</div>

固定高度2:

.box{height:2000px;}
.div{width:100px;height:100px;background:red; position:fixed;left:100px;top:100px;_position:absolute;_top:expression(eval(document.documentElement.scrollTop+100));
}

<div class="box">
 <div class="div"></div>
</div>

 

4、未知高度宽度居中显示

(1)、

.box{ width:800px;height:600px;border:2px solid #000; text-align:center;}
span{ display:inline-block; height:100%; vertical-align:middle;}
img{ vertical-align:middle;}

<div class="box">
 <img src="bigptr.jpg" /><span></span>
</div>

(2)、

.box{ width:800px;height:600px;border:2px solid #000;display:table;position:relative; overflow:hidden;}
span{ display:table-cell; text-align:center; vertical-align:middle;*position:absolute;left:50%;top:50%;}
img{ *position:relative; vertical-align:top;left:-50%;top:-50%;}

<div class="box">
 <span><img src="bigptr.jpg" /></span>
</div>

posted @ 2015-04-13 21:30  海小飞  阅读(258)  评论(0)    收藏  举报