文字溢出隐藏
如果你观察过浮动元素，你会发现这样一个事实，当前一个元素将宽度占满以后，后一个元素就会往下掉，如下所示
代码如下
<style>
div,p{
margin:0;
}
#box{
width: 100px;
height: 20px;
border: 1px solid red;
}
#box .content{
float:left;
height: 100%;
margin-right: 20px;
}
</style>
<div id="box">
<p class="content">CSS</p>
<p>乐趣</p>
</div>
也许在你眼里这是个再正常不过的现象，不过有人却将这个现象用在了实现文本溢出隐藏上，我们来看看他们是怎么实现的。
<style>
div,p{
margin:0;
}
#box{
width: 100px;
height: 20px;
border: 1px solid red;
}
#box p:first-child{
float:left;
height: 100%;
padding-right: 1em;
word-break:break-all;
overflow:hidden;
}
#box p:last-child{
position:relative;
top:-20px;
text-align:right;
}
</style>
<div id="box">
<p>CSS</p>
<p>...</p>
</div>
先来看看它的效果，如下
实现这个效果的原理就是先将省略号通过相对定位移动到box的上方，当第一个元素p的内容超过box元素的宽度时，第二个p元素就会掉下来（一行的高度），如果只想让...在第一个p元素内容超出时才显示，我们可以给box元素加上overflow:hidden;即可。
也不一定得用浮动，两个块元素也是没有问题滴，前一个内容越多后一个元素就越往后，不多说上例子。
<style>
div,p{
margin:0;
}
#box{
width: 100px;
height: 20px;
border: 1px solid red;
}
#box p:first-child{
max-height: 40px;
padding-right: 1em;
word-break: break-all;
overflow: hidden;
}
#box p:last-child{
position: relative;
top: -44px;
text-align: right;
}
</style>
<div id="box">
<p>CSS</p>
<p>...</p>
</div>
这里比之前写的代码多了一行max-height: 40px;之所以这样做是因为我们希望第一个p元素的内容超出才显示第二个元素，而第二个元素是在当第一个元素的宽超出box才会被显示，而只有当第一个p元素2行的时候才算超出，另外这里不用height也是有原因的，如果设置的是height，那么高度就被固定了，如果高度都固定了，显然就不可能去影响第二个p元素。
一行居中，多行居左
需要做到1行居中，多行居左，其实也很简单，我们知道每个元素都可以独自设置自己的文本对齐方式，假如我们将HTML结构写成下面这样
<div id="box">
<p>CSS乐趣</p>
</div>
我们知道父元素是可以控制子元素的对齐方式的，我们先将box的text-align设置成center，再将p元素的text-align设置成left，经管如此设置，结果还是不行的。
<style>
div,p{
margin:0;
}
#box{
width:100px;
border:1px solid red;
text-align:center;
}
#box p{
text-align:left;
}
</style>
结果如下
可以看到p元素，显示的是左对齐，并没有被居中，其原因在于p元素的宽是占满box元素的，这也是块元素的一个特点，假如我们将p元素的display改成inline或者inline-block，p元素就居中了，如下
我们将内容加到两行看看
很显然这不是我们所希望看到的，之所以p元素设置的text-align:left;没有起作用，是因为此时p元素是行内元素，它的宽度是随着内容自适应的，所以永远都不可能多出空间来，既然没有多出的空间，自然就不可能有对齐方式，因为内容就占满了整个空间，虽然行内元素做不到，但是行内块则是可以的，如下
行内块元素的宽虽然是根据内容来的，但和行内元素不同的是，行内块元素的的每一行行宽都已经确定了的（最宽的行宽），所以行内块在内容没有占满的情况下，是可以设置文字的对齐方式的。