CSS實(shí)現(xiàn)文字環(huán)繞圖片效果

文字環(huán)繞圖片，在Word里只要click一下右鍵，調(diào)一下屬性就可以了。但在HTML文檔里就沒(méi)有直接屬性了。因此我們可以借助CSS來(lái)實(shí)現(xiàn)這一效果。

我們先設(shè)定float的參數(shù)，如果圖片需要左對(duì)齊設(shè)為left，若右對(duì)齊則為：right。此外，我們還可以根據(jù)需要設(shè)置圖片和文字間隔的空間，同樣適用CSS的padding。

例：

（一）文字環(huán)繞圖片實(shí)例

效果圖：

（二）CSS文字環(huán)繞圖片遇到的問(wèn)題及解決方法：

一、前言

需要實(shí)現(xiàn)一個(gè)文字環(huán)繞圖片的效果，心想so easy嘛。

1）代碼部分

2）效果圖

很容易就出來(lái)想要的效果了。最關(guān)鍵的代碼：對(duì)圖片進(jìn)行左浮動(dòng)就可以了，這不是挺簡(jiǎn)單的嘛。

當(dāng)把中間的文字替換成連續(xù)的英文字母時(shí)，出現(xiàn)問(wèn)題了，如圖

于是查找相關(guān)資料，測(cè)試結(jié)果后發(fā)現(xiàn)：

瀏覽器默認(rèn)解析英文或者數(shù)字時(shí)，是按照單詞進(jìn)行解析。

也就是說(shuō)，每個(gè)單詞是一個(gè)整體，遇到空間不足時(shí)，不會(huì)對(duì)單詞進(jìn)行拆分。

所以才會(huì)出現(xiàn)上面這種情況。

上個(gè)對(duì)比圖

思考：CSS里面有沒(méi)有相關(guān)的屬性，可以對(duì)文字進(jìn)行強(qiáng)制換行呢？

答案當(dāng)然是有的：word-break: break-all;

這樣就可以解決問(wèn)題了。

在查找資料的時(shí)候，發(fā)現(xiàn)還有個(gè)屬性：word-wrap：break-word; 這咋還出現(xiàn)重復(fù)屬性了呢？

其實(shí)不然，又是一通查找資料，發(fā)現(xiàn)這倆還是有區(qū)別的：

1) word-wrap : break-word ;

--允許長(zhǎng)單詞換行到下一行。

當(dāng)一個(gè)單詞長(zhǎng)度超過(guò)div的寬度時(shí)，默認(rèn)是不會(huì)換行的：如下圖

如果設(shè)置word-wrap : break-word; 這個(gè)單詞就會(huì)進(jìn)行換行顯示

2）word-break : break-all;

-- 是否對(duì)單詞進(jìn)行斷詞處理。

--個(gè)人理解就是： 它會(huì)把一個(gè)單詞的每個(gè)字母拆分成獨(dú)立的單元，

這樣就可以把它填充到每個(gè)地方，所以才能達(dá)到文字環(huán)繞圖片的效果。

以上就是CSS實(shí)現(xiàn)文字環(huán)繞圖片時(shí)遇到的問(wèn)題及解決方法，希望對(duì)大家的學(xué)習(xí)有所幫助。

最新評(píng)論