文字溢出隱藏 如果你觀察過浮動元素，你會發現這樣一個事實，當前一個元素將寬度占滿以後，後一個元素就會往下掉，如下所示 代碼如下 也許在你眼裡這是個再正常不過的現象，不過有人卻將這個現象用在了實現文本溢出隱藏上，我們來看看他們是怎麼實現的。 先來看看它的效果，如下 實現這個效果的原理就是先將省略號通過 ...
文字溢出隱藏
如果你觀察過浮動元素，你會發現這樣一個事實，當前一個元素將寬度占滿以後，後一個元素就會往下掉，如下所示
代碼如下
<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元素是行內元素，它的寬度是隨著內容自適應的，所以永遠都不可能多出空間來，既然沒有多出的空間，自然就不可能有對齊方式，因為內容就占滿了整個空間，雖然行內元素做不到，但是行內塊則是可以的，如下
行內塊元素的寬雖然是根據內容來的，但和行內元素不同的是，行內塊元素的的每一行行寬都已經確定了的（最寬的行寬），所以行內塊在內容沒有占滿的情況下，是可以設置文字的對齊方式的。
