站長資訊網(wǎng)
html設(shè)置超出部分不顯示的方法：1、通過設(shè)置“width:10em;”保證文字不會被半漢字截?cái)啵?、通過設(shè)置“overflow: hidden;”使超出長度的文字隱藏；3、通過“text-overflow:ellipsis;”設(shè)置省略號。
本文操作環(huán)境：windows7系統(tǒng)、HTML5&&CSS3版、Dell G3電腦。
html怎么設(shè)置超出部分不顯示？
HTML設(shè)置超出部分隱藏
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 10em; /*保證文字不會被半漢字截?cái)?顯示10個(gè)文字*/ overflow: hidden; /*超出長度的文字隱藏*/ text-overflow:ellipsis;/*文字隱藏以后添加省略號*/ white-space: nowrap; /*強(qiáng)制不換行*/ } </style> </head> <body> <div> 文字超出了需要隱藏并顯示省略號這個(gè)在工作中很多時(shí)候都要用到，我想很多人都碰到過吧，這個(gè)有兩種解決方法 </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 10em; /*保證文字不會被半漢字截?cái)?顯示10個(gè)文字*/ overflow: hidden; /*出現(xiàn)省略號*/ text-overflow: ellipsis; /*是在第幾行*/ -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; } </style> </head> <body> <div> 文字超出了需要隱藏并顯示省略號這個(gè)在工作中很多時(shí)候都要用到，我想很多人都碰到過吧，這個(gè)有兩種解決方法 </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 10em; /*保證文字不會被半漢字截?cái)?顯示10個(gè)文字*/ overflow: hidden; /*超出長度的文字隱藏*/ text-overflow:ellipsis;/*文字隱藏以后添加省略號*/ white-space: nowrap; /*強(qiáng)制不換行*/ } </style> </head> <body> <div> 文字超出了需要隱藏并顯示省略號這個(gè)在工作中很多時(shí)候都要用到，我想很多人都碰到過吧，這個(gè)有兩種解決方法 </div> </body> </html>
推薦學(xué)習(xí)：《css視頻教程》
