CSS 文字环绕图片

前言

img是行内元素，因为img标签不会独占一行。之所以img可以设置其宽高，是因为img标签既是行内元素，还是置换元素（根据标签属性来显示的元素）。常见的置换元素有img,input,textarea, select...置换元素一般内置其宽高.

先来看看图片后面直接放文字的效果

     
     中文輸入法中文輸入法中文輸入法中文輸入法中文輸入法中文輸入法中文輸入法中文輸入法中文輸入法中文輸入法中文輸入法中文輸入法中文輸入法中文輸入法中文輸入法中文輸入法中文輸入法中文輸入法中文輸入法中文輸入法中文輸入法中文輸入法中文輸入法中文輸入法中文輸入法中文輸入法中文輸入法中文輸入法中文輸入法中文輸入法中文輸入法中文輸入法中文輸入法中文輸入法中文輸入法中文輸入法中文輸入法中文輸入法中文輸入法中文輸入法中文輸入法中文輸入法中文輸入法中文輸入法中文輸入法中文輸入法中文輸入法

imgText1.png

图片和第一行的文字同行，后面文字的文字依次放在 二三。。。行。

---

1.让文字围绕图片展示

我们只需要在上面的基础上为img上设置左右浮动，然后看效果。

  .box img{
    float: left;
   }

imgText2.png

---

2.如果围绕的字符是连续的英文字母

imgText3.png

浏览器默认解析英文或者数字时，是按照单词进行解析。
也就是说，每个单词是一个整体，遇到空间不足时，不会对单词进行拆分。
所以才会出现上面这种情况。

怎样对文字进行强制换行？
设置css属性，word-break: break-all;

   .box{
    width:600px;
    border:1px solid rgba(233,156,76,0.9);
    font-size: 15px;
    word-break: break-all;
   }

imgText4.png

---

3.word-wrap、word-break

什么都不设置

1.png

word-wrap : break-word ;

允许长单词换行到下一行

如果长单词一行还不够放，允许换到下一行，不会超出。

2.png

word-break : break-all;
效果像是将单词的每个字母拆分成独立的单元，这样就可以把它填充到每个地方，所以才能达到文字环绕图片的效果。

3.png