css文字環(huán)繞圖片—遇到的問(wèn)題及快速解決方法
我要評(píng)論需要實(shí)現(xiàn)一個(gè)文字環(huán)繞圖片的效果，心想so easy嘛。
1）代碼部分
- <style>
- .img-left {
- border: 3px solid #005588;
- width:300px;
- }
- .img-left img {
- float:left; /* 對(duì)圖片進(jìn)行浮動(dòng)就可以實(shí)現(xiàn)了 */
- width:150px;
- }
- </style>
- <div class="img-left">
- <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" alt="pic"/>
- 這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文
- <div style="clear:both;"></div>
- </div>
2）效果圖
很容易就出來(lái)想要的效果了。最關(guān)鍵的代碼：對(duì)圖片進(jìn)行左浮動(dòng)就可以了，這不是挺簡(jiǎn)單的嘛。
二、遇到的問(wè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)題了。
四、后記：word-wrap、word-break
在查找資料的時(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文字環(huán)繞圖片—遇到的問(wèn)題及快速解決方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
css文件中的樣式類(lèi)被覆蓋，js文件中的變量未定義問(wèn)題
這篇文章主要介紹了css文件中的樣式類(lèi)被覆蓋，js文件中的變量未定義問(wèn)題的相關(guān)資料,需要的朋友可以參考下2016-04-27CSS實(shí)現(xiàn)文字環(huán)繞圖片效果
這篇文章主要為大家詳細(xì)介紹了CSS文字環(huán)繞圖片遇到的問(wèn)題及解決方法，感興趣的小伙伴們可以參考一下2016-04-27CSS實(shí)現(xiàn)水平居中的4種思路簡(jiǎn)要概述
水平居中是經(jīng)常遇到的問(wèn)題。看似方法較多，條條大路通羅馬。但系統(tǒng)梳理下，其實(shí)都圍繞著幾個(gè)思路展開(kāi)。本文將介紹關(guān)于水平居中的4種思路，感興趣的朋友參考下吧2016-04-27橫向兩列布局（左列固定，右列自適應(yīng)）的4種CSS實(shí)現(xiàn)方式
這篇文章主要介紹了橫向兩列布局，即左列固定，右列自適應(yīng)的4種CSS實(shí)現(xiàn)方式，感興趣的小伙伴們可以參考一下2016-04-27網(wǎng)頁(yè)布局入門(mén)教程 如何用CSS進(jìn)行網(wǎng)頁(yè)布局
這篇文章主要為大家分享了網(wǎng)頁(yè)布局入門(mén)教程，如何用CSS進(jìn)行網(wǎng)頁(yè)布局，介紹了絕對(duì)定位布局、混合布局及結(jié)構(gòu)與表現(xiàn)原則，感興趣的小伙伴們可以參考一下2016-04-27
CSS3表單input輸入框聚焦動(dòng)畫(huà)特效源碼 24種
本特效是一組效果超酷的表單input輸入框聚焦CSS3動(dòng)畫(huà)特效效果的代碼。這組特效共24種不同的聚焦動(dòng)畫(huà)效果，歡迎下載使用2016-04-26CSS3徑向漸變之大魚(yú)吃小魚(yú)之孤單的大魚(yú)
喜歡釣魚(yú)還沒(méi)那個(gè)技術(shù)釣到魚(yú)，下面小編畫(huà)條大魚(yú)安慰我一下柔弱的心靈。感興趣的朋友參考下吧2016-04-26CSS3實(shí)現(xiàn)超酷的黑貓警長(zhǎng)首頁(yè)
這篇文章主要為大家介紹了CSS3實(shí)現(xiàn)超酷的黑貓警長(zhǎng)首頁(yè)的相關(guān)代碼，效果酷炫，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-04-26CSS3實(shí)現(xiàn)千變?nèi)f化的文字陰影text-shadow效果設(shè)計(jì)
這篇文章主要介紹了CSS3實(shí)現(xiàn)千變?nèi)f化的文字陰影text-shadow效果設(shè)計(jì)的相關(guān)資料，感興趣的小伙伴們可以參考一下2016-04-26- 下面小編就為大家?guī)?lái)一篇css 各瀏覽器下的背景色漸變【代碼】。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧2016-04-27
