|
|
|
|
|
|
[CSS]防止移動端放大屏幕時文字換行溢出的方法
作者:admin 時間:2022-5-10 12:44:42 瀏覽:今天在移動端瀏覽網頁，當放大屏幕時發現文字換行溢出了。
放大屏幕時文字換行
這個是CSS沒有寫好。于是我重寫了CSS，經過測試，是可以這樣來防止大屏幕時文字換行溢出的。
CSS
width:400px;font-size:12px;overflow: hidden; white-space: nowrap;
代碼解釋
1、設置div的寬度width值。
2、設置文字大小font-size。
3、overflow: hidden 是表示溢出時隱藏字符，這個其實可以不要，因為我們現在是不讓文字溢出了。
4、white-space: nowrap 是設置空白符不換行的意思。這個是最關鍵的屬性，必不可少。
通過上面的CSS代碼設置，div的文字就不會在移動端上放大屏幕時換行了。
更新后的顯示效果。
放大屏幕時文字不換行
總結
white-space: nowrap 的作用是它強迫字符串遇空白符時不換行，這個在<li></li>列表輸出時非常有用，但它往往需要配合 overflow: hidden 和 text-overflow: clip 來使用，這是設置不讓文字在行末溢出。
相關文章
相關文章
- 以前的失效了,最新CSS識別Chrome、Firefox、IE11代碼
- CSS類不起作用？id、類名、標簽選擇器的優先分析
- 4個實例演示——美化表單input輸入框CSS樣式
- 6款CSS性能檢測、審計(audit)工具
- 4款CSS 3D按鈕點擊過渡效果
- 純CSS實現具有漸變和圓角的彩色邊框
- 10款純CSS Tabs選項卡【實例演示/源碼下載】
- CSS+SVG：畫圓并且文字寫在圓中間
- CSS實現自右向左的豎向文字排布
- CSS+SVG實現環形/圓環文字效果【簡單實例】
- 純CSS實現環形文字效果
- css text-shadow 輕松實現文字投影/描邊/浮雕/剪紙/發光效果
- 純CSS：點擊輸入框時，標簽（占位符）浮動可見
- 純CSS實現文字漸變和文字掃光動畫效果
- 強！純CSS實現彈窗功能，不用JS
x
