溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關(guān)CSS中word-wrap強行自動換行的方法，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
word-wrap介紹
word-wrap是設(shè)置對象內(nèi)文字遇到對象頂邊時是否采取換行排版布局。
1、語法
word-wrap:normal—— 允許內(nèi)容頂開指定的容器邊界，遇到連續(xù)沒有空格英文或沒有空格數(shù)字不換行（默認(rèn)，不設(shè)置對象也具備默認(rèn)樣式）
word-wrap:break-word —— 內(nèi)容將在邊界內(nèi)換行，當(dāng)內(nèi)容太多頂?shù)綄ο筮吔鐣r，內(nèi)容自動強制換行。
2、常見情況
對象內(nèi)連續(xù)數(shù)字或字母太多后，內(nèi)容頂邊對象容器后不會換行，而是溢出繼續(xù)不換行顯示。和漢字或有空格不同，漢字會定格容器邊界會自動換行。
3、使用語法
p{word-wrap:break-word}設(shè)置html段落p內(nèi)文字頂格對象容器邊緣自動換行。
代碼實例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css強制換行</title>
<style>
.bos{ width:200px; height:80px; border:1px solid #F00; word-wrap: break-word; }
</style>
</head>
<body>
<p class="bos">83480348023802ufjflsjfds843820483048jfdljfsl</p>
</body>
</html>顯示效果如下：
設(shè)置class=bos對象寬度，邊框，里面放入連續(xù)不斷文字和數(shù)字內(nèi)容。如果不設(shè)置word-wrap: break-word可以瀏覽器中觀察連續(xù)數(shù)字內(nèi)容不換行超出溢出盒子。
這里給予對象設(shè)置word-wrap: break-word強制換行樣式。
關(guān)于CSS中word-wrap強行自動換行的方法就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責(zé)聲明：本站發(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)容。
億速云公眾號
手機網(wǎng)站二維碼