實現多行鏈結文字智慧型換行

2021-09-30 15:44:16 字數 835 閱讀 8979

上圖**:

li a

案例分析:上圖採用了大家常用的列表來排版文字。只需要把 li 的顯示屬性設為行內,就可以達到自動換行。但是這樣會有一點小瑕疵。不知大家注意到沒,本來標籤a有左右padding,第二行確是頂頭顯示。由於這是一 個鏈結被分行了,顯示並沒錯,但顯示效果並不夠完美。 繼續往下看

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

這樣看起來美觀過了,是怎麼做到的呢,看下**:

li

a **解釋:display:inline意圖在於消除ie6雙倍margin的bug,white-space:nowrap忽略所有空格回車等元素,目的是強制「文字在該塊裡」不換行。如果不強制換行,當寬度不合適時就會出現下圖症狀。

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

總結:對於同樣的效果,通過css可以有很多種實現方法,到底哪種更優秀,需要長時間經驗積累。

為什麼有這個打算。現在很多站,尤其是cms建起來的,往往頁面優化不夠,造成瀏覽速度不夠快。很多站長抱怨空間速度不行,想花大價錢買好空間。其實完全可以從頁面優化入手。

C 如何讓多行TextBox實現換行

要讓乙個textbox顯示多行文字就得把它的multiline屬性設定為true,可是如果你是要把textbox的text屬性設定多行文字時可能會遇到點麻煩,也許你會想到直接加乙個換行符 n textbox1.text first line nsecond line nthird line 可是實際...

CSS實現多行文字截斷

簡歷大家自然都有,這裡我要說的是如果要找海外的工作,最好在linkedin上維護乙份詳細的英文簡歷,不管你是否打算在linkedin上投簡歷,這都是很有用的。首先,很多公司在投簡歷的時候不要你傳送的pdf簡歷,而是要求你在它自己的 上填寫一堆資訊 簡歷大家自然都有,這裡我要說的是如果要找海外的工作,...

C 文字換行的實現方法

關鍵 如下 複製 如下 region 文字換行 文字換行 eg stringhelper.wraptext yanzhiwei 3 www.cppcns.com yan r nzhi r nwei 需要換行的文字 maxwidth 多少長度換行 換行好的文字 public static string...