欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css文字環(huán)繞圖片—遇到的問題及快速解決方法

  發(fā)布時(shí)間：2016-04-26 17:09:37   作者：佚名   我要評論
下面小編就為大家?guī)硪黄猚ss文字環(huán)繞圖片--遇到的問題及快速解決方法。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考

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

 1）代碼部分

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style>   
  2.         .img-left {   
  3.             border: 3px solid #005588;   
  4.             width:300px;   
  5.         }   
  6.         .img-left img {   
  7.             float:left;  /* 對圖片進(jìn)行浮動(dòng)就可以實(shí)現(xiàn)了  */  
  8.             width:150px;   
  9.         }   
  10.     </style>   
  11.       
  12.    <div class="img-left">   
  13.         <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" alt="pic"/>   
  14.         這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文   
  15.         <div style="clear:both;"></div>   
  16.     </div>  

2）效果圖

       

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

二、遇到的問題

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

      

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

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

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

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

上個(gè)對比圖

      

三、解決方法

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

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

這樣就可以解決問題了。

      

 

四、后記：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 ;

  --允許長單詞換行到下一行。

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

         

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

         

  2）word-break : break-all;

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

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

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

以上這篇css文字環(huán)繞圖片—遇到的問題及快速解決方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論