昨天寫了個程序，想實現跟發微博一樣顯示的功能（自己加了些動態顯示效果），在寫HTML和CSS的時候，就遇到一個問題：我在設置好高度400px，寬度300px的ul中，當發出去的li中內容是連續一樣的英文字母時或者是沒有加換行符過長的英文，就會出現內容溢出（li裏邊的內容跑到ul框外邊去了）：如圖：
經過百度查詢之後，竟然沒找到有人遇到和我一樣的問題，所以就只能找css強制換行的屬性了，功夫不負有心人，竟然被我找到了，就是word-wrap屬性，下面我們來複習一下這個屬性。
word-wrap：normal;這個屬性只在允許的斷字點換行（瀏覽器保持默認處理）。
word-wrap：word-break;這個屬性添加了之後可以在長單詞或者是url內部進行強制換行。
把word-wrap：word-break;這條屬性加入到li的style中就可以自由的強制換行了，如圖：
![wKiom1W-2q3ivJgAAADXKO-UHVU631.jpg]( "添加了強制換行後")
下面是我自己實現的一個web發帖的小例子（css粗糙，請勿吐槽）：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>微博發佈消息</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
ul{
width:300px;
height: 400px;
margin: 10px auto;
list-style: none;
border:1px solid;
}
ul li{
width: 298px;
padding: 2px;
word-wrap:break-word;
border-bottom:1px #999 dashed;
opacity:0.5;
filter:alpha(opacity:50);
}
textarea{
display: block;
margin:10px auto;
}
button{
display: block;
margin:0px auto;
}
</style>
<script type="text/javascript" >
window.onload=function(){
var oUl=document.getElementsByTagName("ul")[0];
var text=document.getElementsByTagName("textarea")[0];
var but=document.getElementById("but");
but.onclick=function(){
var myLi=document.createElement("li");
myLi.innerHTML=text.value;
text.value="";
if(oUl.children.length>1){
oUl.insertBefore(myLi,oUl.children[0]);
}
else{
oUl.appendChild(myLi);
}
}
}
</script>
<script type="text/javascript" src="js/move.js"></script>
</head>
<body>
<ul></ul>
<textarea rows="4" cols="20"></textarea>
<button id="but">發佈</button>
</body>
</html>