溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

CSS中怎么實現(xiàn)文字環(huán)繞圖片效果

發(fā)布時間：2021-08-09 16:11:47 來源：億速云 閱讀：179 作者：Leah 欄目：web開發(fā)

CSS中怎么實現(xiàn)文字環(huán)繞圖片效果，針對這個問題，這篇文章詳細介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

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

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

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

例：

代碼如下:

<img  src="/Upic.jpg">將這一個圖片標識語句，插入到頁面文字中間，就OK啦！

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1. <head>  

  2. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  

  3. <title>文字環(huán)繞</title>  

  4. <style>  

  5. div {   

  6. width:300px;   

  7. border:1px solid green   

  8. }   

  9. img {   

  10. float:left;   

  11. width:120px;   

  12. height:120px   

  13. }    

  14. </style>  

  15. </head>  

  16. <body>  

  17. <div>  

  18. <img src="img.gif" alt="圖片" />  

  19. 文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞文字環(huán)繞</div>  

  20. </body>  

  21. </html>  

效果圖：

CSS中怎么實現(xiàn)文字環(huán)繞圖片效果

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

一、前言

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

1）代碼部分

代碼如下:

<style> .img-left { border: 3px solid #005588; width:300px; } .img-left img { float:left; /* 對圖片進行浮動就可以實現(xiàn)了 */ width:150px; } </style> <div> <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" alt="pic"/> 這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文 <div></div> </div>

2）效果圖

CSS中怎么實現(xiàn)文字環(huán)繞圖片效果

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

二、遇到的問題

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

CSS中怎么實現(xiàn)文字環(huán)繞圖片效果

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

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

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

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

上個對比圖

CSS中怎么實現(xiàn)文字環(huán)繞圖片效果

三、解決方法

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

答案當然是有的：word-break: break-all;

這樣就可以解決問題了。

CSS中怎么實現(xiàn)文字環(huán)繞圖片效果

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

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

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

1) word-wrap : break-word ;

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

當一個單詞長度超過div的寬度時，默認是不會換行的：如下圖

CSS中怎么實現(xiàn)文字環(huán)繞圖片效果

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

CSS中怎么實現(xiàn)文字環(huán)繞圖片效果

2）word-break : break-all;

-- 是否對單詞進行斷詞處理。

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

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

關(guān)于CSS中怎么實現(xiàn)文字環(huán)繞圖片效果問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手