1. 程式人生 > >css 禁止換行

css 禁止換行

css換行用省略號代替,也可以說是長標題的文章可以使用簡單的CSS樣式實現省略號控制顯示

程式碼部分:

一般的文字截斷(適用於內聯與塊):
==============CSS================
.text-overflow{
display:block;
width:31em;
word-break:keep-all;
white-space:nowrap;

overflow:hidden;
text-overflow:ellipsis;
}
=================================

對於表格的話,定義有一點不一樣:
==============CSS================
table{
width:30em;
table-layout:fixed;


}
td{
width:100%;
word-break:keep-all;
white-space:nowrap;

overflow:hidden;
text-overflow:ellipsis;
}
=================================

注:這個東東只對單行的文字的效,如果你想把它用在多行上,也只有第一行有作用的。 這個寫法只有IE會有“...”,其它的瀏覽器文字超出指定寬度時會隱藏。

css文字排版強行換行
程式碼結束

在這裡,我們 給li中的列表專案的末尾改成了省略號,是因為li應用了text-overflow:ellipsis;的原因。text-overflow 可以使超 過物件寬度的內容不顯示(使用clip值),也可以設為ellipsis也就是省略號代替了。不過前提是我們對li使用了word- break:keep-all;這個屬性使得li中的元素被強制不換行。

舉一反三:
在實際應用當中,有時候一非常長的句子或英文單詞不停的向右延續使得元素被拉長了,這時候我們就可以用到work-break的 另一個用法:work-break:break-all;,還有一個屬性幫我們實現了多餘內容切斷,就是overflow:hidden;這個屬性用於設 置當一個物件中的內容超過物件寬度時,如何處理這個物件,注意是物件本身,而不是內容。

overflow有幾個值要說明一下:
1.visible:物件隨內容改變而改變
2.auto:使物件根據自己的內容自動產生滾動條
3.scroll:讓物件一直擁有滾動條的存在

強制換行:
強制換行是排版中經常使用到的一種方法,無論是中英文,都有可能出現這種情況,推薦一種目前最常用的控制換行的css樣式屬性:
word-break:break-all;
word-warp:warp;
將這兩行程式碼加入到你要控制的元素裡,中英文通吃 。

還有前面開頭專案列表,如果要去掉前面的專案符號,我們可以在ul里加一個list-style:none;這樣就沒有了,當然你也可以換成小圖 標,那就是list-style-image:url(圖片路徑);但你會發現文字會壓著圖片了,只要在li中再加一個text-indent:2em; 就是控制首行文字的縮排值。em是相對單位,相對於本行其它文字字號的兩倍,也就是2個字元了。