css 樣式布局的問題

2021-07-10 02:57:30 字數 808 閱讀 4006

今天測試頁面,發現乙個奇怪的現象:乙個頁面在除了5s的所有手機上都顯示正常。而且chrome瀏覽器的適配機型裡面,也沒有5s之歌選項。。。導致我們現在才發現問題。

具體問題表現為:頁面整體不能適配手機,雖然設定了寬度為100%。整體頁面偏左,右邊留出15%左右的空白。但是乙個url破出頁面,佔據了整個螢幕。

這個問題我真的上網各種查閱,自己也各種嘗試和猜測,最後還是前輩指點了我一下:

是因為頁面把url看做乙個超級長的單詞,不能正確截斷,運用

word-break:break-all就解決啦。

同時,淺顯地說一下word-break和word-wrap的區別:

1,word-break:break-all 例如div寬200px,它的內容就會到200px自動換行,如果該行末端有個英文單詞很長(congratulation等),它會把單詞截斷,變成該行末端為conra(congratulation的前端部分),下一行為tulation(conguatulation)的後端部分了。

2,word-wrap:break-word 例子與上面一樣,但區別就是它會把congratulation

整個單詞看成乙個整體,如果該行末端寬度不夠顯示整個單詞,它會自動把整個單詞放到下一行,而不會把單詞截斷

掉的。word-break;break-all 支援版本:ie5以上 該行為與亞洲語言的 normal 相同。也允許非亞洲語言文字行的任意字內斷開。該值適合包含一些非亞洲文字的亞洲文字。

word-wrap:break-word 支援版本:ie5.5以上 內容將在邊界內換行。如果需要,詞內換行( word-break )也將發生。

參考文章:

CSS實現樣式布局

使用css建站時,您肯定遇到過形形色色的布局問題,最後可能被搞得焦頭爛額。本文的目的是讓您的設計過程更為容易,當您遇到困難時為您提供快速參考。1 有疑問,先驗證 在除錯時,先對您的 進行驗證往往能省去不少麻煩事。格式不正確的xhtml css 會導致許多布局上的錯誤。在其他瀏覽器中進行測試之前,請先...

CSS樣式 布局篇

1.css基本樣式 背景語法 background background color background image background repeat background attachment background position background 000 url 位址 no repea...

css盒子 布局樣式

恢復內容開始 1.盒子 邊框border top width 10px 寬度 border top style solid dashed dotted 實線 虛線 點線 border top color red 顏色 border top 10px solid red 寬 線 色 上邊框 borde...