css單行文本與多行溢出文本的省略號問題

在文字布局和代碼編寫過程中遇到文本溢出是常有的事，下面總結一下對於單行文本溢出和多行文本溢出省略號的處理。

一。單行文本省略號

<p class="text1">
    這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本
</p>

.text1{
    width: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

這里拿一段簡單的文字示例單行文本溢出：

　　這里的width屬性是必須的，因為需要知道它的寬度是多少，才能判斷溢出；

　　overflow屬性使為了隱藏溢出的文本；

　　white-space:

值	描述
normal	默認。空白會被瀏覽器忽略。
pre	空白會被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標簽。
nowrap	文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標簽為止。
pre-wrap	保留空白符序列，但是正常地進行換行。
pre-line	合並空白符序列，但是保留換行符。
inherit	規定應該從父元素繼承 white-space 屬性的值。

　　text-overflow:

值	描述
clip	修剪文本。
ellipsis	顯示省略符號來代表被修剪的文本。
string	使用給定的字符串來代表被修剪的文本。

二。多行文本省略號

<p class="text2">
    這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本這是文本
</p>

.text2{
    height:53px;
    width:100px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

上面說過的在這里就不再多說了。

在這里height屬性和overflow屬性相結合是為了隱藏省略號一下的文本，大家可以試一下不加的效果，就一目了然了。

line-clamp屬性是為了控制文本顯示多少行。

關於display和box-orient，在這里簡單說一下：

　　說明：必須定義display屬性才可以對box進行划分。

　　box-orient 屬性指定一個box子元素是否應按水平或垂直排列。

值	說明
horizontal	指定子元素在一個水平線上從左至右排列
vertical	從頂部向底部垂直布置子元素
inline-axis	子元素沿着內聯坐標軸（映射到橫向）
block-axis	子元素沿着塊坐標軸（映射到垂直）
inherit	box-orient 屬性的值應該從父元素繼承

如果還是不太明白，大家可以訪問網址：http://wenlong883.blog.163.com/blog/static/1718109162011102281912385/或在w3c里看css各個屬性。