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

标签：

个人笔记

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>

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

标签：

原文地址：http://www.cnblogs.com/haifei/p/4423337.html