首頁 >web前端 >html教學 >css單行文字與多行溢出文字的省略號問題

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

WBOY
WBOY原創
2016-09-22 08:42:141119瀏覽

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

一。單行文字省略號

<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各個屬性。

 

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn