站長資訊網(wǎng)在css中，可以使用white-space屬性來讓文本不換行，只需要給文本文字元素添加“white-space:nowrap;”樣式即可。white-space屬性用于設(shè)置元素內(nèi)的空白怎樣處理，當(dāng)值為“nowrap”時設(shè)置文本不換行。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
css讓文本不換行
css可以使用white-space屬性設(shè)置元素內(nèi)文字不換行，代碼示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> p { width: 300px; border: 1px solid red; } p.nowrap{ white-space: nowrap; } </style> </head> <body> <p> 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 </p> <p class="nowrap"> 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 這是一些文本。 </p> </body> </html>
效果圖：
說明：
white-space屬性指定元素內(nèi)的空白怎樣處理。
屬性值：
| 值 | 描述 |
|---|---|
| normal | 默認(rèn)。空白會被瀏覽器忽略。 |
| pre | 空白會被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標(biāo)簽。 |
| nowrap | 文本不會換行，文本會在在同一行上繼續(xù)，直到遇到 <br> 標(biāo)簽為止。 |
| pre-wrap | 保留空白符序列，但是正常地進(jìn)行換行。 |
| pre-line | 合并空白符序列，但是保留換行符。 |
（學(xué)習(xí)視頻分享：css視頻教程）
