巧用CSS換行讓網(wǎng)站更美觀

2020-03-24 18:06:44

字體：大中小

供稿：網(wǎng)友

普通文本段落的換行案例說明：在實(shí)際應(yīng)用中我們常遇到這樣的問題，就是一段文本，有了明確的寬度，需要文本自動(dòng)換行。（如下圖）案例分析：上面兩個(gè)圖，沒有使用任何排版的CSS屬性，也就是默認(rèn)情況下，塊元素里的文本，達(dá)到邊緣以后會(huì)自動(dòng)換行。但是這里有個(gè)特例：就是內(nèi)容全部為英文字母（沒有單詞句子，沒有詞和詞之間的空格），此時(shí)文本就不自動(dòng)換行了（見下圖）特殊情況：有時(shí)候你寫的東東，默認(rèn)情況下并不自動(dòng)換行，這多半是由于你在其他的CSS屬性設(shè)置里，無意中關(guān)聯(lián)了那個(gè)段話。比如你的 p 元素?zé)o意中有了 white-space： nowrap多行鏈接或文本的換行上圖代碼：li { display: inline }
a { padding: 0 1.2em } 案例分析：上圖采用了大家常用的列表來排版文本。只需要把 li 的顯示屬性設(shè)為行內(nèi)，就可以達(dá)到自動(dòng)換行。但是這樣會(huì)有一點(diǎn)小瑕疵。不知大家注意到?jīng)]，本來標(biāo)簽a有左右padding，第二行確是頂頭顯示。由于這是一個(gè)鏈接被分行了，顯示并沒錯(cuò)，但顯示效果并不夠完美。繼續(xù)往下看上圖有個(gè)小瑕疵，就是歌手名被分行，會(huì)給瀏覽者帶來不愉快的感覺。這時(shí)候我們需要把每個(gè)歌手看做整體，并強(qiáng)制文字在這個(gè)整體中不換行，而是讓這個(gè)塊狀的整體自動(dòng)換行，如下圖。這樣看起來美觀過了，是怎么做到的呢，看下代碼：li { display:inline; float:left}
a { padding: 0 1.2em; display: block; white-space:nowrap} 代碼解釋：display:inline意圖在于消除IE6雙倍margin的bug，white-space:nowrap忽略所有空格回車等元素，目的是強(qiáng)制“文字在該塊里”不換行。如果不強(qiáng)制換行，當(dāng)寬度不合適時(shí)就會(huì)出現(xiàn)下圖癥狀。除此之外，還有其他解決方案，比如讓上面的【a】也浮動(dòng)，這樣它的寬度，就變成自適應(yīng)。總結(jié)：對(duì)于同樣的效果，通過CSS可以有很多種實(shí)現(xiàn)方法，到底哪種更優(yōu)秀，需要長時(shí)間經(jīng)驗(yàn)積累。下一篇我正在策劃“CSS系統(tǒng)布局和排版”，意思就是站在整個(gè)網(wǎng)站層面上，統(tǒng)一布局，而不單是針對(duì)一個(gè)頁面。為什么有這個(gè)打算。現(xiàn)在很多站，尤其是CMS建起來的，往往頁面優(yōu)化不夠，造成瀏覽速度不夠快。很多站長抱怨空間速度不行，想花大價(jià)錢買好空間。其實(shí)完全可以從頁面優(yōu)化入手html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：CSS定義的下拉菜單代碼

下一篇：CSS盒子模式詳解七