《巧用CSS換行讓網(wǎng)站更美觀》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302341512013.htm

上圖有個小瑕疵，就是歌手名被分行，會給瀏覽者帶來不高興的感到。這時候我們需要把每個歌手看做整體，并強制文字在這個整體中不換行，而是讓這個塊狀的整體自動換行，如下圖。

案例闡明：在實際利用中咱們常碰到這樣的問題,巧用cssText屬性批量操作樣式，就是一段文本，有了明白的寬度，需要文本自動換行。（如下圖）

總結(jié)：

為什么有這個盤算。當初良多站，尤其是CMS建起來的，往往頁面優(yōu)化不夠，造成閱讀速度不夠快。許多站長埋怨空間速度不行，想花大價格買好空間。實在完整能夠從頁面優(yōu)化入手。

一般文本段落的換行

li { display:inline; float:left}
a { padding: 0 1.2em; display: block; white-space:nowrap}

CSS換行可以使你的頁面看起來更加美觀。如下圖

案例分析：上面兩個圖，沒有應用任何排版的CSS屬性，也就是默認情況下，塊元素里的文本，達到邊沿當前會自動換行。但是這里有個特例：就是內(nèi)容全體為英文字母（不單詞句子，沒有詞跟詞之間的空格），此時文本就不自動換行了（見下圖）

--> [網(wǎng)站建設(shè)之]巧用CSS換行讓網(wǎng)站更雅觀

除此之外，還有其他解決計劃，好比讓上面的 【a】也浮動，這樣它的寬度，就變成自適應。

li { display: inline }
a { padding: 0 1.2em }

案例剖析：上圖采取了大家常用的列表來排版文本。只要要把 li 的顯示屬性設(shè)為行內(nèi)，就可以到達自動換行。然而這樣會有一點小瑕疵。不知大家留神到?jīng)],屏蔽網(wǎng)頁圖片工具欄的兩種方法，原來標簽a有左右padding，第二行確是頂頭顯示。因為這是一個鏈接被分行了，顯示并沒錯，但顯示效果并不夠完善。 持續(xù)往下看

對同樣的后果，通過CSS可以有很多種實現(xiàn)方式，到底哪種更優(yōu)良,屏幕分辨率和網(wǎng)頁布局簡述，須要長時光教訓積聚。

代碼說明：display:inline用意在于打消IE6雙倍margin的bug，white-space:nowrap疏忽所有空格回車等元素，目標是強迫&ldquo,尼爾森的F型網(wǎng)頁瀏覽模式;文字在該塊里”不換行。假如不強制換行，當寬度分歧適時就會呈現(xiàn)下圖癥狀。

多行鏈接或文本的換行

Tag：CSS   換行   網(wǎng)站   CSS   換行   網(wǎng)站  ,少寫一個`var`是如何毀掉我們網(wǎng)站的;

這樣看起來美觀過了，是怎么做到的呢，看下代碼：

特別情形：有時候你寫的東東，默認情況下并不主動換行，這多半是因為你在其余的CSS屬性設(shè)置里，無意中關(guān)系了那個段話。比方你的 p 元素無意中有了 white-space： nowrap

下一篇我正在謀劃“CSS體系布局和排版”，意思就是站在全部網(wǎng)站層面上，同一布局，而不單是針對一個頁面。

上圖代碼：

(責任編輯：網(wǎng)站建設(shè))
巧用CSS換行讓網(wǎng)站更美觀相關(guān)文章