卡卡網(wǎng)

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

放大屏幕時(shí)文字換行

這個(gè)是CSS沒(méi)有寫好。于是我重寫了CSS，經(jīng)過(guò)測(cè)試，是可以這樣來(lái)防止大屏幕時(shí)文字換行溢出的。

CSS

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

代碼解釋

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

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

3、overflow: hidden 是表示溢出時(shí)隱藏字符，這個(gè)其實(shí)可以不要，因?yàn)槲覀儸F(xiàn)在是不讓文字溢出了。

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

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

更新后的顯示效果。

 
放大屏幕時(shí)文字不換行

總結(jié)

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

相關(guān)文章

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

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

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