En文的强制断行问题
今天在看一篇关于hasLayout的一篇博文《On having layout》（中译版本《[译文]On having layout》），在作者谈及到块元素display设置为inline的时候，它的性质就跟行内元素十分相似了。由此想到了文本在容器里垂直局中的问题，所以就测试了一番。
不测不知道，一测还真学了一套。
第一种情况是：如果文本只是单行的话，这个就简单，直接设置元素的line-height css规则的高度跟height一样就ok了。下面的测试code在每个浏览器都显示正常。
<style type="text/css">
div{
width:400px;
height:200px;
line-height:200px;
border:1px solid #ccc;
}
</style>
<div>only one line at here.</div>
接下来的第二种情况是多行文本垂直局中的问题，但是这里又有一个区分En文跟中文的问题。垂直局中的话只要自适应高度，并且设置上下padding为一个相同的值就能够实现，这个简单。有点小问题就是En文跟中文的断行问题，如果En文内容的长度过长的话，就会撑破原来定的width，每个浏览器的显示都基本类似，除了IE6，它会忽视你定义的width。比如下面的代码：
<style type="text/css">
div {
width:300px;
border:1px solid #ccc;
padding:30px 0;
}
</style>
<div><p>sdfsjdlfjalsdjfalsdjflasdjkljfkladjfkljsdffffffffffffffffffffffffffffffffffffff 我被推出来啦 </p></div>
效果：
中文是完全没有问题滴:
<div> <p>上了飞机数量大幅减少芬兰首都基辅联手打击对方手机的法律我没有被推出来 </p> </div>
对于En文的这个问题，就需要通过css的word-wrap来“强制”换行了，把word-wrap设置为break-word，哟，好了。
<style type="text/css">
div {
width:300px;
border:1px solid #ccc;
padding:30px 0;
word-wrap:break-word;
}
</style>
<div>
<p>sdfsjdlfjalsdjfalsdjflasdjkljfkladjfkljsdffffffffffffffffffffffffffffffffffffff 推我不出来了
</p>
</div>
效果：
关于为啥En文不会自动断行的原因不明，或许这就是有word-wrap的原因吧。更多的关于word-wrap的相关的说明，可以浏览：《word-wrap同word-break的区别》，《CSS WORD-WRAP》。