站長(zhǎng)資訊網(wǎng)css實(shí)現(xiàn)禁止換行并超出隱藏的方法：首先創(chuàng)建一個(gè)HTML示例文件；然后在body中創(chuàng)建一些文字內(nèi)容；最后通過(guò)“white-space”以及“text-overflow”屬性來(lái)實(shí)現(xiàn)內(nèi)容禁止換行并超出隱藏即可。
本文操作環(huán)境：Windows7系統(tǒng)、HTML5&&CSS3版，DELL G3電腦
在CSS中可以使用white-space屬性配合overflow屬性來(lái)實(shí)現(xiàn)文字不換行，且超出部分隱藏。
white-space屬性指定元素內(nèi)的空白怎樣處理，設(shè)置值為nowrap時(shí)，文本不會(huì)換行，文本會(huì)在在同一行上繼續(xù)，直到遇到 <br> 標(biāo)簽為止。
overflow屬性規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情，當(dāng)值設(shè)置為hidden時(shí)，則內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見(jiàn)的。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> p { width: 400px; height: 100px; border: 1px solid red; } .overflow{ white-space: nowrap; overflow: hidden; } </style> </head> <body> <p>普通文本?。?！ 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 </p> <p class="overflow"> 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 </p> </body> </html>
效果圖：
還可以在加上text-overflow屬性，實(shí)現(xiàn)超出部分隱藏，且顯示為省略號(hào)。
text-overflow屬性規(guī)定當(dāng)文本溢出包含元素時(shí)發(fā)生的事情，有以下屬性值：
clip 修剪文本。
ellipsis 顯示省略符號(hào)來(lái)代表被修剪的文本。
string 使用給定的字符串來(lái)代表被修剪的文本。
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> p { width: 400px; height: 100px; border: 1px solid red; } .text-overflow{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } </style> </head> <body> <p>普通文本！?。?這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 </p> <p class="text-overflow"> 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 </p> </body> </html>
效果圖：
【推薦學(xué)習(xí)：css視頻教程】
