用word-wrap解決文字溢位的問題
DIV中明明限制了寬度 ,但是輸入aaaaaaaaaaa...等卻不會自動換行,檢查了一通沒發現問題,原來是(連續的字母會當作一個單詞處理), 外國人看認為一個單詞不應該換行,以下給出的解決方法:
word-break:break-all 和 word-wrap:break-word
word-break:break-all和word-wrap:break-word經常用來解決長字串換行問題。
經過一系列測試後,發現word-break:break-all在IE6/7/chrome/safari為一派,表現為尾部截斷,而ff3.0/opera表現為無效。既過長單詞換行顯示,然後溢位邊界。
word-wrap:break-word;在IE6/7/chrome/safari為一派 表現為長單詞換行,再顯示不下才裁切。而ff3.0/opera也表現為無效
顯然word-wrap:break-word;要更符合使用者體驗,word-break:break-all則可以忽略了,外國人不喜歡把英文單詞切開來看。而針對於ff3.0和opera則只能用overflow-x:hidden隱藏了(ff3.5已經支援此屬性)。
所以這裡建議
word-wrap:break-word;overflow-x:hidden;width:500px;
相關文章
- CSS解決文字溢位問題CSS
- web前端技術分享:多行文字溢位問題解決方案Web前端
- Java解決遞迴造成的堆疊溢位問題Java遞迴
- 如何解決快應用堆疊溢位問題
- [jenkins]解決jenkins記憶體溢位問題Jenkins記憶體溢位
- IE11下javascript報堆疊溢位問題的解決IE11JavaScript
- css文字溢位用省略號表示CSS
- CSS文字溢位用省略號替代CSS
- 長沙WEB前端培訓講解:WEB前端多行文字溢位問題Web前端
- css 盒子溢位問題CSS
- 記憶體溢位的問題記憶體溢位
- 谷歌安卓5.1.1即將推送:解決記憶體溢位問題谷歌安卓記憶體溢位
- 記憶體溢位問題記憶體溢位
- 前端技術分享:盒模型的概念和文字溢位解決辦法前端模型
- java向excel 寫入海量資料記憶體溢位問題 解決JavaExcel記憶體溢位
- Android有效解決載入大圖片時記憶體溢位的問題Android記憶體溢位
- 解決WordPress頁面錯位問題的實用技巧
- 解決SqlServer執行指令碼,檔案過大,記憶體溢位問題SQLServer指令碼記憶體溢位
- 記一次記憶體溢位問題的排查、分析過程及解決思路記憶體溢位
- 用css解決內容文字溢位控制td顯示字數以及隱藏省略程式碼CSS
- 解決記憶體溢位九法記憶體溢位
- SqlDateTime溢位類錯誤解決SQLLDA
- html表格比較寬溢位的解決方法HTML
- 004-盒模型及文字溢位模型
- 如何實現溢位文字省略號
- css文字溢位顯示省略號CSS
- CSS文字:word-wrap(轉)CSS
- 記憶體和棧溢位問題定位記憶體
- POI實現大資料EXCLE匯入匯出,解決記憶體溢位問題大資料記憶體溢位
- 如何巧妙著運用「位運算」來解決問題?
- 阿里大佬講解Java記憶體溢位示例(堆溢位、棧溢位)阿里Java記憶體溢位
- Redis緩衝區溢位及解決方案Redis
- Python中的棧溢位及解決辦法Python
- Java記憶體溢位的詳細解決方案Java記憶體溢位
- 解決mybatis用Map返回的欄位全變大寫的問題MyBatis
- eclipse中啟動專案報記憶體溢位問題通過修改配置解決Eclipse記憶體溢位
- tomcat記憶體溢位問題記錄Tomcat記憶體溢位
- Nuxtjs node memory 記憶體溢位問題UXJS記憶體溢位