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

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

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

需要實(shí)現(xiàn)一個文字環(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)行浮動就可以實(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)把中間的文字替換成連續(xù)的英文字母時，出現(xiàn)問題了，如圖

      

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

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

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

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

上個對比圖

      

三、解決方法

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

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

這樣就可以解決問題了。

      

 

四、后記：word-wrap、word-break

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

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

1) word-wrap : break-word ;

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

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

         

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

         

  2）word-break : break-all;

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

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

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

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

相關(guān)文章

最新評論