小編給大家分享一下css文字不環(huán)繞的解決方法,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
十載的皋蘭網站建設經驗,針對設計、前端、開發(fā)、售后、文案、推廣等六對一服務,響應快,48小時及時工作處理。營銷型網站的優(yōu)勢是能夠根據用戶設備顯示端的尺寸不同,自動調整皋蘭建站的顯示方式,使網站能夠適用不同顯示終端,在瀏覽器中調整網站的寬度,無論在任何一種瀏覽器上瀏覽網站,都能展現優(yōu)雅布局與設計,從而大程度地提升瀏覽體驗。創(chuàng)新互聯公司從事“皋蘭網站設計”,“皋蘭網站推廣”以來,每個客戶項目都認真落實執(zhí)行。
css文字不環(huán)繞的解決辦法:首先創(chuàng)建一個HTML示例文件;然后在body中創(chuàng)建一張圖片以及文字內容;最后使用CSS屬性“word-break:break-all;”在恰當的斷字點進行換行即可。
本文操作環(huán)境:Windows7系統(tǒng)、HTML5&&CSS3版,DELL G3電腦
css實現文字環(huán)繞圖片,--遇到問題及取消文字環(huán)繞效果
我之前在寫一個外國博客的時候遇到了一個問題,關于文字環(huán)繞顯示問題:
1.圖片浮動,中文文字會發(fā)生環(huán)繞效果css文字環(huán)繞 這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文這是一段中文
得出的頁面效果是:
然后把中文換成英文:
數組去重 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
以下是頁面效果:
那么應該如何解決這種問題:
我們可以使用CSS屬性:word-break:break-all;在恰當的斷字點進行換行
例如:
數組去重 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
結果是:
那么如何取消文字環(huán)繞效果呢?
(1)給文字外面加一個p標簽,然后給樣式設置為overflow:hidden,使該盒子成為絕緣容器
例如:
數組去重 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
結果是:
(2)也可以給文字的所在盒子添加margin,也可以使其與圖片左右分離,這樣就不會有環(huán)繞效果
以上是“css文字不環(huán)繞的解決方法”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注創(chuàng)新互聯行業(yè)資訊頻道!