css3——div內文字換行及省略顯示

首先先了解幾個css3屬性：

1.文本溢出屬性：

text-overflow:clip|ellipsis|string;

clip:剪短；

ellipsis:省略；

(全部主流瀏覽器都支持 text-overflow 屬性。)

2.空白區屬性：

white-space 屬性設置如何處理元素內的空白。 這個屬性聲明創建佈局過程當中如何處理元素中的空白符。

3.自動換行屬性：

word-wrap容許長單詞換行到下一行：

word-wrap: normal|break-word;

break-word 在長單詞或 URL 地址內部進行換行。

 

code：

<div class="text">DSKSJFIHFHAJSFASSKSFKPOAKSFJASJFOIJQJFJFOIJQJFQWFPOKSAFPOPMOJPKAFPWQOKFP</div>

.text{

width: 200px;

height: 120px;

border: 1px solid black;

}

很明顯單純靠給div設置寬高是束縛不了文本的。

咱們加上一條overflow：hidden；用以將文本超出部分隱藏掉。

繼續加一條text-overflow: ellipsis;用以將文本超出部分以省略號表示；

這樣就達到咱們的效果了。另外慕課網上面關於省略顯示還包括加上一條white-space:nowrap;用以禁止文本自動換行。

徹底體代碼以下：

text-overflow: ellipsis;

overflow: hidden;

white-space:nowrap;

在css文件內寫入以上就能夠讓文本保持一行，超出顯示區域內容以省略號顯示了。

 

 

另外關於文本在div內自動換行：

在css代碼中加入

word-wrap：break-word；

便可。

 

 

不過悲催的發現，當代碼

word-wrap:break-word;

overflow: hidden;

text-overflow: ellipsis;

同時存在時，文本會充滿div而且超出部分被隱藏而不是以省略號顯示，代碼text-overflow: ellipsis;在此處並無起做用。

 

按照網絡上的說法，若是想讓代碼充滿div而且超出部分以省略號顯示，則更改代碼爲：

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 3;

-webkit-box-orient: vertical;

但實測沒用....

 

 

因此總結爲：

單行文本超出部分顯示爲省略號能夠寫爲：

text-overflow: ellipsis;

overflow: hidden;

white-space:nowrap;

 

文本自動換行只須要替代代碼爲：

word-wrap：break-word；