卡卡網(wǎng)

今天在移動端瀏覽網(wǎng)頁，當(dāng)放大屏幕時發(fā)現(xiàn)文字換行溢出了。

放大屏幕時文字換行

這個是CSS沒有寫好。于是我重寫了CSS，經(jīng)過測試，是可以這樣來防止大屏幕時文字換行溢出的。

CSS

width:400px;font-size:12px;overflow: hidden; white-space: nowrap;

代碼解釋

1、設(shè)置div的寬度width值。

2、設(shè)置文字大小font-size。

3、overflow: hidden 是表示溢出時隱藏字符，這個其實可以不要，因為我們現(xiàn)在是不讓文字溢出了。

4、white-space: nowrap 是設(shè)置空白符不換行的意思。這個是最關(guān)鍵的屬性，必不可少。

通過上面的CSS代碼設(shè)置，div的文字就不會在移動端上放大屏幕時換行了。

更新后的顯示效果。

 
放大屏幕時文字不換行

總結(jié)

white-space: nowrap 的作用是它強(qiáng)迫字符串遇空白符時不換行，這個在<li></li>列表輸出時非常有用，但它往往需要配合 overflow: hidden 和 text-overflow: clip 來使用，這是設(shè)置不讓文字在行末溢出。

相關(guān)文章

• 以前的失效了,最新CSS識別Chrome、Firefox、IE11代碼
• CSS類不起作用？id、類名、標(biāo)簽選擇器的優(yōu)先分析
• 4個實例演示——美化表單input輸入框CSS樣式
• 6款CSS性能檢測、審計(audit)工具
• 4款CSS 3D按鈕點(diǎn)擊過渡效果
• 純CSS實現(xiàn)具有漸變和圓角的彩色邊框
• 10款純CSS Tabs選項卡【實例演示/源碼下載】
• CSS+SVG：畫圓并且文字寫在圓中間
• CSS實現(xiàn)自右向左的豎向文字排布
• CSS+SVG實現(xiàn)環(huán)形/圓環(huán)文字效果【簡單實例】

• 純CSS實現(xiàn)環(huán)形文字效果
• css text-shadow 輕松實現(xiàn)文字投影/描邊/浮雕/剪紙/發(fā)光效果
• 純CSS：點(diǎn)擊輸入框時，標(biāo)簽（占位符）浮動可見
• 純CSS實現(xiàn)文字漸變和文字掃光動畫效果
• 強(qiáng)！純CSS實現(xiàn)彈窗功能，不用JS
• CSS實現(xiàn)：固定Table表頭和表腳
• 純CSS制作各種Charts圖
• CSS實現(xiàn)文字顏色漸變效果
• CSS 32個鼠標(biāo)形狀cursor屬性
• CSS 15個長度單位使用區(qū)別

標(biāo)簽: css  文字換行  文字溢出