溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“word-wrap和text-overflow有什么區(qū)別”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“word-wrap和text-overflow有什么區(qū)別”吧！
一：word-wrap強(qiáng)制換行屬性
在css3中，我們可以使用word-wrap屬性來確定一串長單詞和url，并且是否可以換到下一行，word-wrap的取值有兩個(gè)，分別是normal和break-word，normal是表示默認(rèn)的值，自動(dòng)換行，第二就是設(shè)置url的長度，并且進(jìn)行強(qiáng)制換行。
例如：
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3word-wrap屬性</title>
<styletype="text/css">
#lvye
{
width:200px;
height:120px;
border:1pxsolidgray;
}
</style>
</head>
<body>
<divid="lvye">WelcometotheChinesewebsite,wherethereisendlessPHPknowledgetoletyouroamintheseaofknowledge.http://www.php.cn/div-tutorial-275623.html</div>
</body>
</html>
以上代碼在瀏覽器中的預(yù)覽效果：
微信截圖_20181026161827.png
如果我們?cè)赿iv中加上word-wrap:break-word;就會(huì)出現(xiàn)強(qiáng)制換行，如果出現(xiàn)單詞太長的話，就會(huì)出現(xiàn)超出范圍。在制作網(wǎng)站的時(shí)候，我們只要選擇默認(rèn)的值就好。
二：text-overflow文本溢出屬性
我們?cè)陬A(yù)覽網(wǎng)頁的時(shí)候，總會(huì)看到這樣的現(xiàn)象，當(dāng)我們的文字超出一定的范圍，就會(huì)以省略號(hào)的形式顯示，并且多余的文字不會(huì)顯示。這樣設(shè)置其實(shí)對(duì)用戶比較好，可以幫助用戶知道更多的內(nèi)容。
想要隱藏多余的內(nèi)容我們可以使用text-overflow屬性，一般text-overflow也是有兩個(gè)值，第一種情況就是當(dāng)文字溢出出現(xiàn)省略號(hào)顯示，另外一種就是當(dāng)文字溢出顯示省略號(hào)，并且將溢出的部分不顯示。
text-overflow語法為：
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
前提條件是這三個(gè)條件同時(shí)顯示才能使用。
例如：
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3text-overflow屬性</title>
<styletype="text/css">
#div1
{
width:200px;
height:100px;
border:1pxsolidgray;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}
</style>
</head>
<body>
<divid="div1">php是最好的語言，歡迎大家學(xué)習(xí)交流</div>
</body>
</html>
感謝各位的閱讀，以上就是“word-wrap和text-overflow有什么區(qū)別”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)word-wrap和text-overflow有什么區(qū)別這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
