word-wrap和text-overflow有什么區(qū)別

以上代碼在瀏覽器中的預(yù)覽效果：

微信截圖_20181026161827.png

如果我們?cè)赿iv中加上word-wrap:break-word;就會(huì)出現(xiàn)強(qiáng)制換行，如果出現(xiàn)單詞太長(zhǎng)的話，就會(huì)出現(xiàn)超出范圍。在制作網(wǎng)站的時(shí)候，我們只要選擇默認(rèn)的值就好。

二：text-overflow文本溢出屬性

我們?cè)陬A(yù)覽網(wǎng)頁(yè)的時(shí)候，總會(huì)看到這樣的現(xiàn)象，當(dāng)我們的文字超出一定的范圍，就會(huì)以省略號(hào)的形式顯示，并且多余的文字不會(huì)顯示。這樣設(shè)置其實(shí)對(duì)用戶比較好，可以幫助用戶知道更多的內(nèi)容。

想要隱藏多余的內(nèi)容我們可以使用text-overflow屬性，一般text-overflow也是有兩個(gè)值，第一種情況就是當(dāng)文字溢出出現(xiàn)省略號(hào)顯示，另外一種就是當(dāng)文字溢出顯示省略號(hào)，并且將溢出的部分不顯示。

text-overflow語(yǔ)法為：

text-overflow:ellipsis;

overflow:hidden;

white-space:nowrap;

前提條件是這三個(gè)條件同時(shí)顯示才能使用。

例如：

#div1

{

width:200px;

height:100px;

border:1pxsolidgray;

text-overflow:ellipsis;

overflow:hidden;

white-space:nowrap;

}

php是最好的語(yǔ)言，歡迎大家學(xué)習(xí)交流