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

在文字版面配置和程式碼編寫過程中遇到文字溢位是常有的事，以下總結一下對於單行文字溢位和多行文字溢位省略號的處理。

一。單行文字省略號

<span style="color: #008080;">1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="text1"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span> <span style="color: #000000;">    这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本
</span><span style="color: #008080;">3</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

<span style="color: #800000;">.text1</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    white-space</span>:<span style="color: #0000ff;"> nowrap</span>;<span style="color: #ff0000;">
    text-overflow</span>:<span style="color: #0000ff;"> ellipsis</span>;
}

這裡拿一段簡單的文字範例單行文字溢出：

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

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

　　white-space:

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

　　text-overflow:

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

二。多行文字省略號

<span style="color: #008080;">1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="text2"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span> <span style="color: #000000;">    这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本这是文本
</span><span style="color: #008080;">3</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

<span style="color: #800000;">.text2</span>{<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;">53px</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
    text-overflow</span>:<span style="color: #0000ff;"> ellipsis</span>;<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> -webkit-box</span>;<span style="color: #ff0000;">
    -webkit-line-clamp</span>:<span style="color: #0000ff;"> 3</span>;<span style="color: #ff0000;">
    -webkit-box-orient</span>:<span style="color: #0000ff;"> vertical</span>;
}

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

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

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

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

　　說明：必須定義display屬性才可以將box分割。

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

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

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