在<head>與</head>之間寫入
<style type="text/css">
<!--
div{line-height:150%;
border:#ccc 1px solid;
font-size:12px;}
li{width:110px;
word-break:keep-all;
text-overflow:ellipsis;
overflow:hidden;}
-->
</style>
在這裏，我們給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個字符了。
用CSS控制文字的寬度
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
Customized the Server.xml for tomcat
----from server.xml <!-- Tomcat Root Context --> <!-- <Context path="" docBase="ROOT" debug="0">